🗓️ [Penpot] Forbidden characters in token names

Understanding that design tokens will ultimately be consumed in code and transformed using tools like Style Dictionary, it's essential to avoid character clashes during this transformation process.

Forbidden Characters in Design Token Names

According to the Design Tokens Community Group, the forbidden characters in a design token name are:

• $ at the beginning of the token name

• {

• }

• .

To further ensure compatibility and avoid clashes, we have taken additional steps to prohibit certain characters from being used in token names. The following characters and elements are not allowed:

• Special characters

• Emojis

• Spaces

However, we allow certain characters with specific considerations:

• . (Dot): We allow . in the token name as it creates groups. During token transformation, the . is removed and transformed into other formats like kebab case, camel case, etc.

• (Hyphen): We also allow the use of - in the name of the token, but this could lead to some unintended consequences if the transformation converts it into camel case, for example. For instance, button.border-radius could be transformed into --buttonBorderRadius
  
  
  We would love your feedback on the characters that are not allowed in token names.