How to persist color overrides between instance swaps?

Hi Nathi, if you don’t mind sending me link to the file, I can take a look and see if we can fix it somehow.

god bless your tender heart

Hey @Pratyush_Tewari you are using shapes here right? Probably made out of different unified shapes with stroke and fill properties. While they can include both, once you unify them, they actually receive the color information via the fill prop if you want to change it, and as this is the same everywhere that works fine.

However if I want to use instances inside a wrapper component and inside this one change the color override of the nested one (that can then change from stroke prop to fill prop) this override will not be passed on.

I guess this is just something I have to live with and always go with a unified shape approach. Let’s see

Hi @Oliver_Schwaiger - The icons ((union / and flattened - like you mentioned, I created a massive library of about 3000 icons form the new google variable font symbols).

In my previous screenshot, these icons are being used inside the button component as an instance swap property. The buttons have colored states (like hover and disabled) and I have changed the color of the shape in each button variant.

the color override works through the instance swap for me because the following two conditions:

1. all of the 3000 shapes have same name (“vector” in my case) and
2. I have directly overridden the colors of the shapes (which have the same name, height and width) and not on the frame of the icon (which has unique names).

So when even I swap for a new icon in a button … the color override for states and variants work across all the 3000 icons inside for that icon.

I’ll make a video about it and share to explain as it seems like an important feature for massive design systems.

Thanks for the simple example. I was struggling with this problem for a long time.

Please can you link me to this video tutorial if it exists?

Muchas gracias por la información. Al día de hoy (024/07/2024) funciona este método, tenía mal nombrado las capas de los íconos y al momento de cambiar de color en los componentes los íconos no respetaban el color que asignaba, cuando cambié el nombre de los iconos por la palabra “icon” a todos por igual, funcionó por magia. Muchas gracias por la solución, me he demorado días resolviendo este problema.

Solution: Apply colour styles to the assigned variables on your main component.