Bug: [TOKENS] Internal error on Typo tokens due to circular dependencies on other token types

[madalenapmelo-kp]

Issue

There’s an uncontrolled circular dependency allowed between typography tokens and other tokens that provide, in theory, valid referenced values.

It happens when you reference from the typography token fields other valid tokens (number token, font family token, font weight token, etc), filling just one field at a time, and then, from the referenced tokens, reference the typo tokens as well.

How to reproduce

1. Create a Font Family token with a valid font value
2. Create a Typography token referencing the previous on its Font Family field (fill just this field)
3. Edit the Font Family token and reference in its value the Typography token (forming the circular dependency)
4. Press the “Save” button

Expected behavior

The same as what happens with other font tokens that can reference other valid basic tokens.  
Show a message on step 3, when a circular resolved dependency is detected: ”Missing token references: number“.

Actual behavior

A warning is displayed in the resolved value: “Resolved value: RangeError: Maximum call stack size exceeded”

An Internal error happens if you press the “Saved” button, with the following error log file trace:

Hint: Maximum call stack size exceeded  
Prof ID: c6b12730-702d-11eb-b327-eb0147e048f5  
Team ID: 5daeec9f-0eaf-80c6-8006-99b799b8eff4

Data:  
{:hint "Maximum call stack size exceeded"}

Trace:  
RangeError: Maximum call stack size exceeded

Screenshots or video

Environment

• It happens on PRE and PRO

Linux Mint 22.1 (xia) (Ubuntu 24.04 noble)  
Google Chrome Version 141.0.7390.107 (Official Build) (64-bit)

URL

Not required

https://tree.taiga.io/project/penpot/issue/12488