Support Global Token Reference After CSS Variable Conversion

[sakit0]

Summary:
I would like to propose an enhancement where tokens can reference global tokens after CSS variable conversion. The goal is to ensure that when a token references a global token (e.g., a color variable like white), the reference to that global token is preserved during the conversion process.

---

Current behavior:
Global tokens are defined separately from light theme tokens.

For example

GlobalToken.json

{
  "white": {
    "$type": "color",
    "$value": "#ffffff"
  }
}

Light.json

{
  "primary": {
    "$type": "color",
    "$value": "{white}"
  }
}

The current output in CSS looks like this:

:root {
  --white: #ffffff;
  --primary: #000000;
}

Expected behavior: The primary token should reference the global white token, so the ideal CSS output should look like this:

:root {
  --white: #ffffff;
  --primary: var(--white);
}

This enhancement would improve token management by ensuring references between tokens are maintained across themes and token files, making the system more modular and scalable.

Or is there a way to achieve this?

[sakit0]

The problem has been solved with the outputReferences option. Closing