Design tokens, with semantic variables, between spaces.

We've noticed an issue with how design tokens work between spaces.

We have semantic design tokens, like "Brand Primary 1" and "Brand Primary 2" which connect to a css variable, such as --primary-1 and --primary-2.

We have multiple sites, which share 1 codebase, but have different color themes, that define what "Brand Primary 1" is. For 1 site, it's blue, for another site it's purple.

Currently, if I want to build some content in one space, and then copy and paste it into another space, the value copied is:

{

"color": "hsl(var(--brand-primary-01, 867 53% 09%))"

}

When I paste this into the next space, the display does work, however, the value includes the fallback, and so the actual value in the new space's dropdown, is not properly selected.

I think a better way of passing this data, would be the actual design token name. That's really the only way to ensure that the moving between spaces works properly.

What if people just use direct hex value? That's actually more broken.

{

"color": "#123456"

}

That simply would ignore the Design Token name itself, and just make it the same color the content was on the other space.