Token Groups

The token group defines one logical group of colors, fonts, gradients, or any other design tokens. Each token group always contains only one type of token that corresponds with it.

Example Token Group Payload

This is what the payload of one group looks like:

{
  "id": string
  "name": string
  "description": string
  "path": [string]
  "tokenType": "Color" | "Typography" | "Radius" | "Font" | "Measure" | "Shadow" | "Border" | "Gradient" | "Text"
  "isRoot": boolean
  "tokenIds": [string]
  "subgroups": [Token Group]
}

Token groups form a tree of dependencies. There is always one root of the tree representing one type of token, such as Color. When a group has subgroups, the payload will look like this:

{
  "id": string
  "name": string
  "description": string
  "path": [string]
  "tokenType": "Color" | "Typography" | "Radius" | "Font" | "Measure" | "Shadow" | "Border" | "Gradient" | "Text"
  "isRoot": boolean
  "tokenIds": [string]
  "subgroups": [{
    "id": string
    "name": string
    "description": string
    "path": [string]
    "tokenType": "Color" | "Typography" | "Radius" | "Font" | "Measure" | "Shadow" | "Border" | "Gradient" | "Text"
    "isRoot": boolean
    "tokenIds": [string]
    "subgroups": [Token Group]
  }]
}

Because the tree can only be constructed with groups and tokens of the same type, the type of all groups and tokens in one tree will be the same as the type of root group.

Associated functions

You can use the following functions to retrieve token groups from your design system:

PreviousTextNextDesign System

Last updated