Sync styles issues with new file

[megaroeny]

I just purchased the UI Kit version 2.1.1. If I want to make any changes to either the Light or Dark theme, the proper way to do it is to make changes to the Styles in the Figma library and then sync those changes via importing/sync again in Tokens Studio.

The issue is that even if I don't make any changes, Tokens Studio sync is showing many changes, including new tokens. There are a decent amount of changes for the Light-themed file as well, but much less than Dark (and no additional tokens).

Is there an issue with the latest version of the Figma UI kit and the provided tokens being out of sync or outdated? Can you please test and see this for yourself? I posted this in Discord, but I see you use this forum for official support, so I put it here for you.

Here's a recording of what I'm seeing, with tokens not referencing any other tokens (which would be expected for design tokens, obviously), and where syncing styles, even with a fresh download of UI Kit v2.1.1., is showing a ton of changes: https://drive.google.com/file/d/1yxlxWQ ... p=drivesdk

Please let me know if I can help you test anything or how I can correct this issue (especially for the Dark UI kit). Thank you for your help, much appreciated.

[megaroeny]

I'm also noticing some values are incorrect. For example, in the Light-themed Figma file, the style hex

Code: Select all

#1ea0ff

is different than the value displayed next to the color box

Code: Select all

#3b82f6

. There is probably more inconsistencies between the styles in the file, and the tokens I'm guessing. Maybe this is why during an initial sync in Tokens Studio, it's showing tons of changes and tokens being added (like typography and more).

[megaroeny]

Here's another video/follow-up to what happens in a "consumer" file when using the library + tokens studio. This is before any style syncing from a fresh Figma file download.

The Tokens Studio team said in order to solve this, we need a Pro license to Tokens Studio so that the styles do not break in a "consumers" file with instances of the library. The only thing that can be consumed in another file using TS, are spacing/padding tokens. Not styles (color or type).

https://drive.google.com/file/d/1z024ul ... p=drivesdk

[w00f]

Hi,

Right at the beginning of the video, you were looking at theme.primary under Semantic Blue colors, which is not connected in any way to the semantic colors in the current version of our themes.

Check here:
https://github.com/primefaces/designer- ... ables.scss
https://github.com/primefaces/designer- ... ables.scss

Regarding the use of raw values instead of reference values:

We intentionally avoided using reference values. This is because all the tokens in the UI Kit are based on decisions implemented in the component libraries, and the values defined in the 'variables.scss' of the themes will undergo significant changes during the development phase of our upcoming major project, the Theme Designer application. Therefore, for now, we decided to make an initial release using raw values.

Regarding importing:

The best practice for editing colors while working with the Tokens Studio is changing the colors using the plugin.

Seeing new values for importing is completely normal because lara-light in our situation is the source, and lara-dark only has the color overrides. However, the 'Update Existing Tokens' part seems strange. We will investigate further and get back to you.

Best regards,

[megaroeny]

Hi,

Right at the beginning of the video, you were looking at theme.primary under Semantic Blue colors, which is not connected in any way to the semantic colors in the current version of our themes.

Check here:
https://github.com/primefaces/designer- ... ables.scss
https://github.com/primefaces/designer- ... ables.scss

Regarding the use of raw values instead of reference values:

We intentionally avoided using reference values. This is because all the tokens in the UI Kit are based on decisions implemented in the component libraries, and the values defined in the 'variables.scss' of the themes will undergo significant changes during the development phase of our upcoming major project, the Theme Designer application. Therefore, for now, we decided to make an initial release using raw values.

Regarding importing:

The best practice for editing colors while working with the Tokens Studio is changing the colors using the plugin.

Seeing new values for importing is completely normal because lara-light in our situation is the source, and lara-dark only has the color overrides. However, the 'Update Existing Tokens' part seems strange. We will investigate further and get back to you.

Best regards,

Ah okay that makes sense. Thank you. What is your advice for someone who wants to use the UI kit for now then? Only change colors and typography using tokens for the theme/components?

I was able to update the font by changing the styles and then syncing the styles in the tokens again, without issue. But that was only typography. There's two sets of type styles still wanting to be added that are missing: 1.2 & 1.5 line-heights.

Lastly, have you considered changing the root tier name to "Primitives"? Semantic is usually for the components (2nd tier).

Thanks again, appreciate the help.

[megaroeny]

Regarding importing:

The best practice for editing colors while working with the Tokens Studio is changing the colors using the plugin.

Does that mean I shouldn't sync styles I'm assuming? And if I change primary for example, using the plugin, how do I trigger that change in the file? Do I click Apply for "Entire doc" so it triggers the change to every component using primary? I don't why I would want to use "Apply to selection" only since that would only change it in one place, correct? OR what I think would work is change the color styles in the file, then use the plugin to sync color styles and only update the tokens using primary. That should work, right?

Also, those GitHub URLs aren't working/404. But I believe I found the ones you mentioned from your Theming docs page.

Thanks again for your time.

[w00f]

Hi,

If you want to use Tokens, the best way to maintain the file is by changing everything through the Tokens Studio interface.

As I mentioned before, this release is an initial release, and the entire tokens structure may change during the development of the new Theme Designer. So, we can change it, but it completely depends on the development. Changing the primary color won't make much of a difference since, as you may have noticed, we don't use the primary color as a reference in the Token structure; we only use raw values. However, in terms of workflow, for optimal performance, we recommend that you change Tokens through the plugin and keep the 'Apply to Page' setting.

Apologies for the incorrect link. Corrections:

Light Theme Variables: https://github.com/primefaces/primeng-s ... ables.scss
Dark Theme Variables: https://github.com/primefaces/primeng-s ... ables.scss

Best regards,

[megaroeny]

Sounds good, thanks again for the details and information Woof.

[megaroeny]

Here's another example of what it looks like when I have a few component instances, and try to apply the opposite theme of the library the instance is from.

For example, these are from the Dark file, and I want to apply the "Light" tokens set (theme) to the instances. Only a few elements actually change. Is that because you're in the early phase of migrating and updating the tokens and how they're synced to the components? I believe if you apply the tokens to the components, connect them so they're synced, and not rely strictly on the styles from the file, this will be possible. You might even be able to avoid having to have two separate library files entirely!

[w00f]

Here's another example of what it looks like when I have a few component instances, and try to apply the opposite theme of the library the instance is from.

For example, these are from the Dark file, and I want to apply the "Light" tokens set (theme) to the instances. Only a few elements actually change. Is that because you're in the early phase of migrating and updating the tokens and how they're synced to the components? I believe if you apply the tokens to the components, connect them so they're synced, and not rely strictly on the styles from the file, this will be possible. You might even be able to avoid having to have two separate library files entirely!

Hello Megaroeny,

I've tested the situation you've described, but didn't encounter any issues. It's not immediately apparent to me how we could approach this differently.

Please find the screen recording here for your review: https://www.dropbox.com/s/mio83yljx35sy ... 5.mov?dl=0

Best wishes,