How to customize per-project tokens

[davide-granello]

Hello,
i'm having trouble customizing the tokens for my project.
I want to customize the primary color and its shades specific for my project. When i do that in tokens studio plugin, i see all buttons in my project change color correctly, but when in prototyping, the hover color of the buttons is not updated with my modified value (theme.primary.dark.color) and i still see the default color while hovering.

This is the procedure i followed:

1. Downloaded the figma ui kit (version 2.2.0)
2. Imported in figma
3. Published as library
4. Opened Tokens Studio plugin and set it up using a repository on github
5. Pushed tokens to github (without changing them)
6. Opened a new design file for my project
7. Added the ui kit library in assets
8. Set up tokens studio plugin by connecting to the github repo
9. Once all tokens are pulled, i changed the provider to "local document" so that the tokens i change in my project stay local and does not propagate
10. Modified primary color values (theme.primary.color , theme.primary.dark.color , etc..) and applied
11. Added a button in design mode (color is OK)
12. When prototyping, the hovered button shows the old default color instead of the modified one

Is there something i'm missing?

[onursenture]

Hello,

The result you are getting in the prototyping phase is not an error; it is indeed how Tokens Studio operates.

Even though you are changing and applying hover tokens in the consumer file, you are not effectively changing the hover state's style, as the button's hover state resides in the library's main file.

There are two ways to resolve this:

1. The Ideal Way: Make the desired color changes directly in the main file, publish these changes on Figma, and, if you have set up a GitHub for Tokens, push these changes there. Then, pull the changes into the consumer file.
2. If you prefer not to make changes to the main file, a workaround would be: Copy the button component as is to the consumer file, then make your token changes in the consumer file. When using the button, use the new local button component, not from the library.