Reuse css variable when using semantic token with refference

[isBatak]

Description

Current implementation duplicates the color value for referenced semantic tokens.

For example:

const tokens = {
  colors: {
    red: {
      value: '#ef4444',
    },
  },
  semanticTokens: {
    colors: {
      danger: { value: '{colors.red}' },
    },
  },
}

will output

--colors-red: #ef4444;
--colors-danger: #ef4444;

Problem Statement/Justification

Seems like a logical and reasonable implementation.
If we forcefully override panda css variable in our project that change will be also applied to semantic token.

Proposed Solution or API

we should reference the original css var like this:

--colors-red: #ef4444;
--colors-danger: var(--colors-red);

Alternatives

No response

Additional Information

No response

[segunadebayo]

Converting this to a discussion since it's technically not a bug but more of a feature-request.

Thanks for working to implement this.

[ivanbanov]

this is a must-have, fully reactive themes need it, in the meantime the escape hatch is var(--colors-foo)

[tanangular]

My workaround solution is use with token.var()

tokens: {
  colors: {
    red: { value: '#ef4444'},
  }
},
semanticTokens: {
  colors: {
    danger:{ value: `${token.var('colors.red')}` }
  }
}

/*
--colors-red: #ef4444;
--colors-danger: var(--colors-red);
*/