apply local changes to already defined token

I am not sure I misunderstand something you are saying but that's literally what local style source is for - the last item that has circle icon

I think @Niels is thinking about merging local styles into an existing token.

Ah gotcha, yeah you can do that using css preview and copying what you want to merge from there, then going to advanced panel and pasting into the input when adding a new property.

Ok. That’s cool. Never thought about that.

That makes two of us! This is a good idea.

I'd also like to have this – in a more discoverable way than copy from CSS Preview to Advanced. Attached, a suggestion to integrate this into the context menu.

Extract = cut (Ctrl+X) existing local styles to clipboard. Local no longer holds styles afterwards.
Merge = Add clipboard styles (from local or other Token) to selected Token styles

I also smuggled in a suggestion to clarify what Remove and Delete means. I regularly have to think briefly, which is the right option to click.

Probably "Paste" would be a better name

Copy, Paste, Cut

"Remove from Object" wouuldn't know what to think of it, did you mean it as an alternative to "Clear Styles"?

With Merge I wanted to express that pre-existing styles on Some Token are retained. I associate *Paste * with fully replacing the settings of "Some Token" with Local Styles. Yet, I would want to merge, not to replace.

"Remove from Object" wouuldn't know what to think of it

You currently use two similar words for two quite different operations: Remove and Delete. The outcome of both operations even at first sight may look the same. That's why I think a clarification or at least a tooltip explanation (at the bottom of the context-menu) would help a lot.

Remove just means detaching a Token from the selected object. Delete means "removing" the Token from all pages and the file entirely, which could be quite painful, when issued accidentally.

With Merge I wanted to express that pre-existing styles on Some Token are retained.

You are on menu of a specific token, that means if pasted style overwrites something it overwrites, if its not conflicting its addded. Semantics of "paste" checks here.

You currently use two similar words for two quite different operations: Remove and Delete. The outcome of both operations even at first sight may look the same. That's why I think a clarification or at least a tooltip explanation (at the bottom of the context-menu) would help a lot.

Yep, agree, needs a tooltip, difference is subtle but important, mabye something like "Delete from project" and "Remove from instance" would help

Detach instad of remove might be also a good idea

quite painful, when issued accidentally.

We have a warning dialog

but it should be still easier to grasp at a glance

Detach instaed of remove sounds very good

I could live with "paste" as well 🙂.

Renames remove to detach
https://github.com/webstudio-is/webstudio/pull/4814

Holger's suggestion is exactly what i would wish for. The solution Oleg presented works well, but it is not very obvious when you don't know it.

@Holger, did you intend the "merge clipboard-styles" design to grab all tokens applied and convert that into a single token? I have common tokens setup like "flex, md:block, m-sm, etc". I often will type those in as designing but would then prefer a token to apply to the element. I'd love a way to merge them all easily.

No, I only suggested to merge with the now selected token the content that you previously extracted from Local (or another Token). So the default thing would be remove data from Local and add to desired Token, just as suggested by Niels.

Such a functionality could, however, also get used to consolidate styles from a bunch of meager Tokens that the control freak in you added to the project. In this case one would run the command repeated times, extracting from different Tokens, each time.