I am working on a design system with several different libraries:
- Icons (consists of several sets of variants, icons that may be used across the broader business)
- Component library (source-of-truth components for every reusable element, includes placed instances from Icons lib in some components)
- 2 themed style libraries (colors and text styles, named identically), let’s call them Theme 1 and Theme 2 here.
I have the components within the Component Library using Theme 1 as a default, and when these components are placed in other design files using the Assets panel, when I select one of these placed instances, it shows the Selection Colors as being from library Theme 1. So far so good. However, when I swap the style library in my design file from Theme 1 to Theme 2, only items originally created or defined in my local file will actually swap the color and text styles, even though all of the placed components are also referencing the same colors by name from the corresponding original Theme 1 library. So elements specific to my design file (not in the Component Lib) will correctly update from Theme 1 to Theme 2, but all the components from Component Lib are still stuck in Theme 1.
A workaround I’ve found is that if I select placed components in my design file, and I use the Selection Colors palette to re-select identical colors (i.e. even though they say they are using Default from Theme 1, I still have to select “Default” again from Theme 1 in order for it to be a “local” color definition “override”, then it will work that I can swap libraries within my design document and have it affect local elements AND all placed library components. But this is far from ideal, because it requires knowing that any colors defined at the Component Library level have to be re-defined at the instance level before they will be swappable.
Another alternative is that I could have a Theme 1 Component Library and Theme 2 Component Library, but I want to avoid duplicate component libraries. The whole idea of the style Theme libraries is to avoid managing multiple sets of components. Even if I were to have a “Base Components” lib and then places instances within Theme 1 Component Lib and Theme 2 Component lib, it still requires publishing and receiving updates several times to get them to populate in designs (i.e. update Icon Lib → update Base Component lib → Update Theme 1 > Update Theme 2 > update design file).
Is there any way to do this better? Ideally when I swap libraries in a design file, all components using a style name would update to the new library colors and text styles. But this is not how it is currently behaving unless I manually go to the pains of “updating” every color to the same color it already is in the Component Library which sort of defeats the purpose. It also is likely to make onboarding library users more challenging, since this defies intuition.