Composite Design Tokens

A composite design token is when a design token's value is made up of other values.

Pretend you have two tokens:

GLOBAL.COLOR.BLUE = '#0000FF'

GLOBAL.BORDER.OUTLINE = '2px solid'

If you combine the two to make a new token, you can say:

THEME.BORDER.PRIMARY = '{GLOBAL.BORDER.OUTLINE} {GLOBAL.COLOR.BLUE}'

The final value would be '2px solid #0000FF'.

This is different than an alias token, because it is doing more than just a reference. It's composing multiple tokens together.

Alas: composite tokens.