🗓️ [Penpot] Token groups

Current Situation

Token names are rarely short and sweet. They generally have many sections in their names pertaining to token type, state, property, variant, and more.

Desired Solution

Token Groups

To manage the complexity of token names, we break down a token name when we come across a . and structure it in the JSON format accordingly.

For example, a typical token name like button.primary.default.background-color would be broken down and structured like this in the JSON:

{
  "button": {
    "primary": {
      "default": {
        "background-color": {
          "$value": "#f00",
          "$type": "color"
        }
      }
    }
  }
}

In the above example, the different sections in the token name can represent a token group. This means that if you have another token button.primary.hover.background-color, it would share the same group button.primary and can be represented in JSON like this:

{
  "button": {
    "primary": {
      "default": {
        "background-color": {
          "$value": "#f00",
          "$type": "color"
        }
      },
      "hover": {
        "background-color": {
          "$value": "#FF0011",
          "$type": "color"
        }
      }
    }
  }
}

To make this easier to view in the UI, we are introducing nesting of token groups.

Nesting of Token Groups has two parts to it:

• Visual Appearance or UI

• Actions that can be done on a Token Group

This post aims to introduce the UI but also to start a discussion on the actions.

Actions on a Token Group

The actions on a token group would include:

• Rename

• Delete

• Duplicate

Feedback Requested

We would love feedback on the following:

• UI and the visual hierarchy

• Actions on token groups and their behaviors