Generated Design Tokens file

Help us improve Penpot
, ,
1

I am trying to use downloaded tokens.json file with Style Dictionary v4 for generating CSS variables, but I encounter problem with referencing values. Penpot doesn’t reference full path for the value in Json .

What is generated by Penpot:

{
   "Global":{
      "red":{
         "$value":"rgb(252, 35, 35)",
         "$type":"color",
         "$description":""
      },
      "warning":{
         "$value":"{red}", <<<<<<<<<<<< That's the problem
         "$type":"color",
         "$description":""
      }
   },
   "$themes":[
      
   ],
   "$metadata":{
      "tokenSetOrder":[
         "Global"
      ],
      "activeThemes":[
         
      ],
      "activeSets":[
         "Global"
      ]
   }
}

The red color should be referenced {Global.red} to work.

It’s even described in the Design Tokens Format Module → Design Tokens Format Module

" For a design token to reference another, its value MUST be a string containing the period-separated (.) path to the token it’s referencing enclosed in curly brackets."

Maybe I am to new to the topic, but it seems that the path need to be included.

2

Hey @marekbrze
In this example, the Global key is the name of the set , not the name of the group, you can check it below, in the $metadata fields. This is why this is not included in the reference.

I’ve tried to export a penpot json with a similar example (but with groups) and it works as expected, the references include the full path:

{
    "Global": {           <<<<< set name (not included in tokens paths)
        "color": {          <<<<< group
            "red": {          <<<<< token name
                "$value": "#fabada",
                "$type": "color",
                "$description": ""
            },
            "blue": {
                "$value": "blue",
                "$type": "color",
                "$description": ""
            },
            "reference": {
                "$value": "{color.red}", <<<<<< full path (group + name}
                "$type": "color",
                "$description": ""
            }
        }
    },
    "$themes": [],
    "$metadata": {
        "tokenSetOrder": [
            "Global"
        ],
        "activeThemes": [],
        "activeSets": [
            "Global"
        ]
    }
}

I hope this helps!

1 Like
3

Thanks for the answer - I will have to check it once I am in front of the computer.

I wonder if in your case Style dictionary require once again to have the full path - so in this case Global.color.red. Especially when referencing values from different sets (primitive vs semantic tokens sets).

4

No, it’s not required. Sets are simply a way to organize your design tokens into logical files, often by theme, platform, or different brands. You can think of them as folders or layers that help manage different versions of the same tokens.

However, sets do not appear in token reference names. This is intentional, because one of the key benefits of using sets is the ability to define different values for the same token name across multiple sets (e.g., color.primary might have a different value in a “light” and “dark” set). If set names were part of the references, this flexibility would be lost.

5

This discussion seems like the most appropriate place to ask about my problem:

I’m using a multi-file export to organize my tokens, splitting my ‘base’ set into granular files like base/colors.json and base/spacing.json. However, Penpot interprets these as distinct sets rather than a unified ‘base’ library. This creates UI friction, as I have to toggle multiple sets instead of viewing one cohesive category. I need to maintain separate files for version control and AI-readability (avoiding 3,000+ line files), but I want them to be aggregated into a single ‘base’ set within the Penpot UI. What is the recommended configuration to achieve a ‘split-source, unified-display’ workflow?

Example token files (only single keys for brevity of example):
base/colors.json:

{
  "jungle": {
    "0": {
      "$value": "#ecfeb0",
      "$type": "color",
      "$description": "--jungle-0"
    }
  }
}

base/fontSize.json

{
  "0": {
    "$value": "8px",
    "$type": "fontSizes",
    "$description": "--font-size-00 (.5rem)"
  }
}

$metadata.json:

{
  "tokenSetOrder": [
    "base/fontWeight",
    "base/rotation",
    "base/lineHeight",
    "base/opacity",
    "base/colors",
    "base/textCase",
    "base/layer",
    "base/spacing",
    "base/shadow",
    "base/fontSize",
    "base/letterSpacing",
    "base/textDecoration",
    "base/borderRadius",
    "base/sizing",
    "base/fontFamily",
    "mode/dark",
    "mode/light",
    "semantic",
    "components"
  ],
  "activeThemes": [
    "/light"
  ],
  "activeSets": [
    "semantic",
    "mode/light",
    "themeLight",
    "themeDark",
    "components"
  ]
}

This is what it looks like:

image
image451×466 16.2 KB

Where I would rather have it displayed as a single “base”, similar to how the following semantic ones look like:

image
image451×466 14.2 KB