I would like to have a library for some components, so I can use them in different projects. In these projects all colors, fonts, spacings etc are different so I was naming them like “primary color” and so on. I assumed that I am able to change them in the project to which they are imported, but unfortunately not.
When I import a component it has all the styling from the library and if I want to change the font color, it’s not possible with the replacement when right clicking on the color of the library under style tokens. It simply does nothing in the project, in which I imported that library. When I go to the colors and right click onto “Find all references” it’s empty even after importing some components from the library.
So what would be the best approach on that?
IMO, this is mostly working as it should be. The only way I rationalize someone being able to change the imported color from a project where the color was imported into is if there a specific Design Owner role where that role would have the permission to do that if they were logged in with that role within the new project.
If you had that projected imported into other projects, changing it would also change it for all the other projects once they update. And that isn’t something that should be done lightly.
Instead, I think the user experience has improved in the push from yesterday where you are now able to right-click and open the imported project in a new tab.
The approach I had suggested that seem to relate to the same problem is this
https://plasmiccommunity.slack.com/archives/C01NR9R0MS7/p1704044048596739
Sorry, I read your comment now five times and I don’t think you understood my problem in the right way.
I have a library with a component with let’s say a photo, some text on it and a button. The photo and text are slots.
I now import that library to project A, which hasn’t got a white, but a black background and the button isn’t greyish, but blue as it would fit into project B.
I am atm not able to change these colors to fit to the project A inside the project A and not the library instead of creating copies of the library with the colors, that fit to the project I imported it to. So if I see the margin in that component had a typo or whatever, I have to change that in every single copy of the library.
I got to a point where it is useless for me, while I usually would use CSS and put other values in. So it fits to the new project with the same template.
And yes, I want to have the changes inside the library in every other project, as I know what I am doing. That’s why I created a library as there are components in it, which I want to use in more than one project and if I see it has to be changed, I want to have the change in x projects and not only one.
That’s why I wrote in here my question.
Hi, I am actually confused by the new reply.
My first understanding was that you had a library and this library is composed of components and tokens, when you import the library you would want to have the components but being able to customize the tokens so that the components would have a different UI’s but without affection the library project.
From this second reply, I didn’t understood why do you need copies of the library if you want the changes in all projects that use the library. I mean if you change the original library, publish a new version, then update the version of the imported library in your project, wouldn’t it achieve this result?
Let’s say I have a component inside the library which uses the style token “background” and I set it in the library to white. I use this component then for project A, which also has a white background. Everything is fine.
Now I import it to project B, which has a black background. So it doesn’t fit anymore and I want to change that.
Which is what you understood at first.
ATM I am not able to have the background in black other than having a copy of the library with the style token “background” set to black (see my first post about the replacement). I had to change the value to black in the library, but this also affects the component in project A. So having a copy of the library is just the only way I saw for fixing my problem and I don’t want that.
That’s why I asked what would be the best approach for my case.
Is this the kind of solution you’re looking for because of the error that happens when you try to change it?
I created versions of what I think you’re trying to explain here
I think you might also be able to achieve what you’re trying to achieve using Global Variants
Yes, I see what you are trying to achieve @sociable_aphid, at the moment, Alyssa suggestion of using variants could be easier to you than creating multiple copies of your whole project, but I see that having all variants for all the styles you need in the library would be counter intuitive, as it would make more sense that the library should not be opinionated for the projects that you are going to use it with.
We don’t have anything planned for it right now, but we do see some requests for something to improve this behavior,
@fmota The thing is, that the components already have variants for different versions (like photo fitting to the whole size of the component and one with a padding) and the content creators shouldn’t be disturbed/confused by so many variants for other sites. So this wouldn’t be a solution. It seems I have to go with the copy atm. Thx.
Yes, it makes sense
I see what you’re saying Sabine; I. have a feeling I’ll likely run into this at some point myself, so I’m going to spend some time later thinking through how I would do it and come back here. I have a feelings it will end up being having a Universal Libarary, and then Project A Library that imports from the Universal Library and modifies some of the settings and then Project A imports from the Project A Library and Project B imports from the Universal Library; but both Project A and Project B import from the Universal Library
@bright_cephalopod Yes, that’s what I wanted - a universal library. But it’s not working, when you have to change the colors. A very common case is a different background color and every company has it’s own colorset they want to have in their buttons, borders and so on.
mmhmmm; I know exactly what you mean
But thx for your effort anyway 
Have you watched the talk on expressive design systems? Does a really good job of talking through the concept of what you’re facing https://www.youtube.com/watch?v=lYo9jk6Z5Dk
@fmota if ya’ll are looking for an easier way to White Label, I feel like having these features is going to be a key to that; also, I’m sure whatever will need to change to enable this; will also help with getting Dark Mode for the platform a possibility as well (if connecting these dots helps get it prioritized"
@sociable_aphid if you need it sooner or later; this might be a good proposal for this program https://plasmiccommunity.slack.com/archives/C0389J02PQ8/p1703196785380869
Solution to my problem:
1.) Import the library (aka project) into the (other) project.
2.) Duplicate the component(s) from your library.
3.) Click on the right side on assets and then components.
4.) Look for the component you want to change colors or styling for and click on it
5.) Again click on assets, but this time on style tokens.
6.) Look for the style token you want to change.
7.) Click on the three dots on it and select “Replace …” and select the style token of the project that fits to your needs.
awesome!