Getting randomly different colors for color tokens in production

@yang @chungwu I am Tushar, I work with @spiritual_mosquito and @scientific_porpoise
We wanted to deliver a site to our client today and noticed a strange issue with the style tokens.
Please see attached screenshots, the pointed at elements have the same color token applied and still show in different colors randomly. This has been happening all over the site and just started happening today. We think it might have something to do with Plasmic but are not sure. It would be great if you can look take a look and help us with the issue.
Thank you.

hi! what’s the project id?

hi @chungwu please see tY8KVP3FyHCq4ZB6DorvpM

thanks; what’s the component?

I think @autonomous_fowl or @spiritual_mosquito could answer that better. They told me it had to do with the style tokens. They just are not acting right

is there a deployed site somewhere with this issue that I can take a look at?

I’ll PM you

It looks like the odd ones out (“Specialties & Interests” and “Hobbies”) have their colors set explicitly to the “practice_primary” token, while the other headers are inheriting the default color for H5 (which, so happens to also be practice_primary). However, there are actually two “practice_primary” tokens; one defined in this project, and one imported:

One of the practice_primary tokens appears to be overwritten by some custom css on the app host:

which is also why all the non-header text looks blue here, instead of gray like in the studio

Thank you for you reply @chungwu!
Token is supposed to be overwritten from CSS.
Can we delete the imported tokens somehow?

You can’t unless you remove the imported project altogether. You could also apply the token to the other headers, so they’ll also get the same overridden color (note how the color for Hobbies has a blue dot next to the Color field, but not Hospital Affiliations)

We’re using the tokens to dynamically style the site. That’s exactly why we need the tokens to be more reliable. --plasmic-token-practice-secondary was applying the value for the Primary token, now sometimes it applies it for the imported one. Now 2 tokens show up with the exact same name and we don’t know which is which.

We’ve been working with these tokens for months, today is the first time we noticed we’re getting 2 different versions.

do you actually need the “dev-reuben twh-plasmic-next” project to be imported? at a glance it doesn’t look like you’re using any components from there

Is removing the import reversible?

You could publish a version first before you try so you can revert back to itv

Deleting the import of the project worked. And everything is now back to normal. Thanks @chungwu