Token sets

A token set is one DTCG Format document at a location such as brand/color. Each / adds a folder in the sidebar of Syntope Tokens. A set is also what a theme switches and one file in a ZIP export.

Creating a set

Press new token set at the bottom of the sidebar, or create token set in an empty project. Enter a path and press create.

primitives/color
brand/acme/color
mode/dark
component/button

Paths are stored in lowercase. Spaces become hyphens. Characters other than letters, digits, /, _ and - are removed.

Message	Cause
Enter a token set path.	Empty input
A token set already uses “…”.	The path is taken

A new set joins Base, so its tokens count at once.

Managing sets

Right-click a set:

Action	Behaviour
Rename	Changes the location. References and layer bindings do not change, because neither uses the location. A set moved to another folder goes last there
Duplicate	Copies the set to <location>-copy and adds it to Base. Its tokens are new tokens, so layers stay bound to the original
Delete	Removes the set and every token in it. The confirmation gives the token count and names any theme left with no set, which is deleted too

Right-click a folder and choose Delete to remove every set in it, after the same confirmation. Folders cannot be renamed: rename their sets instead.

If other tokens refer to what a delete removes, it stops as described under deleting a token. Undo restores a deleted set while the plugin stays open.

The sidebar

Each set shows its token count and a tick: filled when the set is in the result under the themes in use, empty when it is not, and a dash on a folder that is partly in the result. The tick only reports this. Change it in the themes tab.

Drag a row, or press Alt+Up or Alt+Down, to move it among its siblings. This changes the display order only, never a value. The order that decides which set wins is in the themes tab.

Set location and token path

	Separator	Example
Token set location	/	primitives/color
Token path	.	blue.500

A token path does not include its set. The reference is {blue.500}, wherever the token lives. See references and aliases.

A structure that scales

This layout is a recommendation. The plugin requires none.

primitives/color    blue.500, neutral.900                  literals
primitives/space    space.4, space.8                       literals
semantic/color      action.default = {blue.500}            references
component/button    button.background = {action.default}   references

Each tier refers to the one before it. Anything a theme should switch gets its own set, with the same token paths in each:

mode/light     surface.default
mode/dark      surface.default
brand/acme     brand.primary
brand/globex   brand.primary

How sets map to files

A project ZIP holds one Format file per set, at its location:

design-tokens.zip
├── design-tokens.resolver.json
└── tokens/
    ├── primitives/color.tokens.json
    ├── semantic/color.tokens.json
    └── component/button.tokens.json

Inside a file, the token path becomes the nesting. The location is not repeated.