let Code Connect read the resolved variable mode
Our components are themed with a variable collection, not with extra variants. The collection has four modes:
- Personal light and personal dark are the consumer theme. Light is the normal surface. Dark is the inverted, brand-colored surface.
- Business light and business dark are a separate business theme. Same two surfaces, different colors from personal.
A button has no Theme property. Type, size, and state stay the same. The mode is set on a parent frame and inherited, and the fills come from color variables. The same primary button looks different in each mode.
In code we have a matching theme value. Code Connect cannot emit it, because figma.selectedInstance only exposes component properties, nested instances, and text. There is no way to read the active mode.
The Plugin API already has this as resolvedVariableModes, including modes inherited from a parent. Please expose the same thing on the Code Connect instance, with the collection name and the mode name, so a template can set the theme.
Same request, already open:
forum.figma.com/suggest-a-feature-11/ge…ead-variable-modes-44075
- https://github.com/figma/code-connect/issues/188 (open since October 2024; Figma replied that modes are not supported)
Happy to share a file if someone from Figma wants a concrete example.