Join the Webstudio community

Updated 11 months ago

Clear specific token states

At a glance

The community member is using the Radix navigation component and wants to convert several states to tokens instead of using local styling. They want to keep the current local component styling and remove the states only. However, when they selected the "Focus visible" option, the "Clear styles" feature cleared the entire local token instead of just the selected state. The community members discuss the need for a better UX to clear specific states, and one member mentions that there is a reset button and option+click functionality for elements with a blue background, but the original poster couldn't get this to work for their use case.

Using the Radix navigation component, I want to convert several states to tokens (instead of the local styling on them).

For example, I've created a token for "focus-within" to apply to multiple elements. I want to keep the current local component styling and remove the states only. In the image, I've selected the "Focus visible" thinking "Clear styles" would apply to that only, however it's across the entire local token. Could a "clear" button be added to states or something?
Attachment
CleanShot_2024-03-04_at_11.57.172x.png
O
S
7 comments
that's correct, clear clears the entire style source
we need to think of a good ux for clearing specific states
I'm trying to remove padding from local... so it can be handled by a style source... but it seems to be impossible to remove... is that correct?
you see blue label around number? hover > reset value or option+click
Do you mean this blue outline? I can't seem to trigger any 'clear' feature using the instructions above.
Attachment
Screenshot_2024-03-05_at_12.28.06.png
any blue background has always in style panel a tooltip that has reset button and option+click
Add a reply
Sign up and join the conversation on Discord