When changing theme, don't just look for applied tokens but also swap any applied styles if we find a match in our saved style id's

[six7]

We should allow users to swap themes not just by looking at the applied tokens in a document, but also by looking at applied styles to swap that to another style of another theme. Usually designers work with styles first, not with applied tokens. So giving a way of actually performing that swap with the plugin will help a lot of users.

We should introduce an option to toggle this behaviour, as we can't cache it this will be a slow operation. However, users will want to use this on single layers to have multiple themes side by side. This option should be default: false.

Also, if a user doesn't have any themes setup (or no figmaStyleReferences), we can safely ignore this setting, as it won't have any effect.

When I have themes setup, Light and Dark
And I have styles connected to these themes,
And I do not have color tokens applied via the plugin,
But have Styles applied on layers that are part of the `Light` set.
And I have one or more layers selected

If I then switch to the Dark theme and I press the Update button the plugin will swap any applied tokens but also any applied styles to the ones that are part of the Dark set.

As an example: fg.default is defined in both Light and Dark with different style Ids, Light: S:123 and Dark: S:245 If the plugin traverses the layer tree and finds a layer with styleId S:123, which is the styleId of the Light theme that has a sibling (same token name) in the Dark theme, then the plugin can apply S:245 as the new style id.

[six7]

@LiamMartens would love to hear your thoughts on this issue as it has performance implications (we talked about this briefly), I feel this approach would work for users, but we'd be able to turn it off. Essentially it would allow us to have Themer-like functionality. Is this something that you feel is doable?

[danvpeterson]

We're currently setting up Figma Tokens and hoping to distribute to the whole design org within 1-2 months but hit an issue that this would really help with. Right now, there is no way to apply a different color (or other token) to specific text within a layer. If I want to have a link in the middle of a paragraph for example, I need to be able to apply a different color just to the link along with potentially a different typography token as well. Unfortunately, due to API limitations from my understand, applying a token from within Figma Tokens it has to apply to the entire layer. Styles can be applied to whatever text is currently highlighted.

[six7]

Shipped in 129 for Pro users