CAnnot add design token alias

Ask the community
1

Having 2 issues.

I have a design token bs.color.blue
I am trying to create an alias bs.color.blue.500

  1. it tells me bs.color.blue.500 already exists, but I have no other libraries loaded in this project
  2. It won’t enable the Save button, telling me instead that “Invalid color value: {bs.color.blue}”

#2 is the real issue.

#1 the error is displayed as soon as I type in “bs”, and doesn’t disappear once it has appears, even though I type in something that can’t possibly alreay exist

I have disabled all chrome extensions and cleared the cache for penpot

3

Hello @Edward_Thompson

About issues #1 and #2, it seems to be a bug, just tested and it appears that Penpot reads every name with dots as one single thing, no matter what comes after the first dot (maybe a bug cause by the preparation of token groups? dunno).

Better file a bug report for the team so they can look further into it.

1 Like
4

Hey @Edward_Thompson is the same issue as this one? Taiga

5

Looks like it is - I referenced creating it anew, and that ticket references it against pre-existing aliases

6

Hey, this is not a bug. I’ll try to explain it:

Design token names are built from token paths. Periods (.) are used to nest tokens groups. Then, the last segment of the token name corresponds to the token.

The thing is that a token name cannot also be a token group.

So in the example you are using:

bs.color.blue creates this nested structure:

bs          /* group */
  color     /* group */
	blue    /* token */

But bs.color.blue.500 creates this one:

bs          /* group */
  color     /* group */
	blue    /* group */
      500   /* token */

Here’s the problem: in the first case, blue is already a token. In the second case, you’re trying to make blue a group, which causes a conflict.

This behavior is not from Penpot, but from tokens spec :slight_smile:

I hope this helps!

3 Likes
7

Very clarifying, I thought this was an actual bug, but seeing it that way, is just makes sense.

1 Like