Tokens

[izmalkovv]

There aren't any connections between tokens in the Tokens Studio plugin after importing the file with UI Kit into Figma. What's wrong with that? How to change the library theme? only changing one by one the all existed tokens?

[onursenture]

Hi, At present, our tokens do not reference values because there are significant updates in progress related to our new theme engine. In our initial release, we have utilized raw values for the tokens. However, it's imperative to note that subsequent releases will see these tokens referencing semantic values following the planned updates.

[izmalkovv]

How can I change accent colors to my brand one in all tokens around your design system? It seems the system is fully unusable in case I cannot because I will need a lot of hours just to change colors to my branding

…

On Tue, 10 Oct 2023 at 10:08, Onur Senture ***@***.***> wrote: Hi, At present, our tokens do not reference values because there are significant updates in progress related to our new theme engine. In our initial release, we have utilized raw values for the tokens. However, it's imperative to note that subsequent releases will see these tokens referencing semantic values following the planned updates. — Reply to this email directly, view it on GitHub <#194 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BDET4IB4QV2KKJVI3R5A2PDX6TX5XAVCNFSM6AAAAAA5YYJG62VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TEMZXGU2DQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[onursenture]

You can easily modify all styles in the file using plugins like Style Organizer. At the moment, you may not be able to perform operations such as easily changing the primary and accent colors with Tokens. Because, as mentioned in the message above, tokens are not linked to their semantic values in this version. You will have to wait for improvements in future versions for these features.

[izmalkovv]

Please let your buyers know that UI Kit has this crucial problem with colors before they buy the product. In case I knew that bug, I wouldn't buy this product.

[megaroeny]

Another good one (maybe better) that I personally used to do this is Batch Styler. It's actually made by Jan Six himself (who made Tokens Studio) 😄

[onursenture]

Hello @megaroeny,

Sorry for the late response. While I'm familiar with Batch Styler, the main reason I suggested Style Organizer is because it shows the common use of colors in other styles and allows them to be merged with a single click.

I couldn't find such a merge feature in Batch Styler. For our case, for example, merging all special colors where the primary color is used under theme/primary/color can actually help users to easily carry out the color change process they are requesting.

Of course, having to perform the operation separately for each page can be a bit tiresome.
After merging some important colors with Style Organizer, it could be quite beneficial for them to make color changes with Batch Styler.

Thank you!

[heath-capstone]

Hello @onursenture! I'm just getting started with both PrimeOne 2.2.0 AND Tokens Studio, and it looks great so far so thank you! Before I jump in and start experimenting I was hoping you might be able to confirm whether this issue with Tokens Studio has been resolved already or if it's still present in the 2.2.0 release. Thanks so much!

[onursenture]

We've resolved issues related to token connection problems. Here's what's been done for tokens:

• All color tokens are now connected to components.
• New typography tokens have been created and linked to components.
• Theme color tokens are tied to the component's color tokens for simplified color modifications.

Thanks! ⚡️

[bobtongs]

Hi @onursenture, we've just started using version 2.2.0 and seem to be still having the problems that you've indicated are resolved above. So, for example, changing the {theme.primary.color} token and applying it any part of the Figma file does not produce any changes in the color of associated designs, i.e. the color of the primary button does not change. Also, changing the token sets that represent the dark and light themes has no effect.

This seems to be because the local styles for colour and text are over-riding the Tokens Studio tokens. Is the correct way to use version 2.2.0 just to delete the styles and use the tokens (or vice-versa, if you want to just use the styles)?

Should we just switch to version 3, but I'm not sure this aligns with version 17 of PrimeNG codebase?

Thanks.

[onursenture]

Hi @bobtongs, the solutions I listed above for version 2.2.0 have been tested and confirmed to work.

For example, I just tried changing the primary.theme.color again and did not encounter any issues:

github-194.mov

And yes, although I recommend updating to version 3, it is incompatible with PrimeNG 17.

[erikvlmnt]

Hi @onursenture, I'm having the exact same issue as @bobtongs. (also on v 2.2.0).
I just did the exact thing you did on the video without producing those results (primary button color remains the same).

Is there something I'm missing or doing wrong? Or is this not working properly?

Appreciate your help. Thanks!

[erikvlmnt]

Okay "Update Figma Styles on Apply" was not selected and it seems to work once I do. Is this the expected workflow?