round doesn't work because doesn't make it clear it it works like token
Agree. that's just for example
bordered one looks also off
with the menu on it its not gonna be clickable, because you need to be able to activate the item without clicking the menu
just realized that it needs a minimum width that makes it much wider
alternative is to show the menu icon always
kinda need to make it work together with the menu
maybe also a version with filled background but white icon would work?
I don't get what menu are you talking about 😅
Maybe put menu by default
now try to select the style source without activating the menu
you need half of that space to be available to do that
how do you do it with the tokens?
I just click on the arrow down icon
no, how do you select/activate the token?
I think its it will be basically the same size as Local right now just with an icon and menu icon visible
icon COULD help explain that this one is different than others
yeah, I think this might be very close
I still think icon is not ideal
btw what if the icon is just in the middle and menu only shows on hover?
while keeping the minimum width
btw total min-width we have defined so far is 36px
how does it look with all other tokens in place (entire UI)? can we try 2 other versions: one just the circle without the pin and nother one with pin but with a sharper angle, this one loooks a little off, not sure why
Another idea for the icon - try the 1.3px width stroke
right now the icon is fat and that's what makes it feel weird in comparison to text in other tokes
a simple circle could be interesting to see too
definitely better than fat
maybe the radius is too big, but probably something is missing still, maybe a dot inside?
it does have this pin in it, without making it look like it can be unpined
the lines aroud circle make it look like target finder
could be, which one do you like most?
I agree yeah, these 2 look decent
Icon idea is the way to go, though maybe something like a power on and off icon may be more appropriate.
Something like a "O" with empty background and border showing when not in use and then a "|" with background filled when in use.
You could also go with an always showing "O" and "|" and background color is filling the side thats on or off like in the first icon set in this image.
this is an interesting idea if we combine this with selected/unselected
hmm, no then it wuold change the icon by selecting other tokens, even though its still applying
no, it won't work, since there is no complete deactivation
by selecting/unselecting you are just selecting where changes will be applied
the off state does not exist technically
just to avoid unnecessary associacions with the location icon
since its a very unique thing, we need to kinda avoid wrong associations
One thought on this - what if the local styles were separated out of style tokens 🤔
This could also potentially allow to do className styling in the future or similar extension of this functionality
local style has to be cohesive with tokens
they are basically the same, local styles has restrictions
class name will never be a preferred option - I can unpack it, but it will be a thread, its a UX disaster
local style source is not that different from tokens, its just that its not sharable and fixed position as last, because it is meant to override things locally
generally styles are stored on a local just the same way they are on tokens
think of it as of a private class name thats only allowed to be used with that instance
I am assuming with this new update, we would be able to use backspace to remove tokens when active in the style source panel
Throwing out another suggestion for the Local style UI here.
Because there is always a Local style for a component, it would be good to make it visually part of the Style Sources input box.
The suggestion is to connect the Local chip to the edge of the input box, whether the chip includes text or an icon.
Hmm. But now I see that could be confusing when there's a single line for the input box. Looks like you're entering info for Local. This is a tricky UI exercise.
yeah that's not working with multiline
Local is now explained in the menu
the assumption was that "Local" as a term isn't explaining much either way
I like it. Visually distinct enough from tokens. The explanation is definitely helpful, too.
FYI, Divhunt uses a similar approach to Webstudio regarding design tokens. They call the Local instances "tags." Here's their UI:
That "tag" chip is locked the left
I prefer Webstudio's new approach above.
I wonder if having the chip first in line is visually simpler, but I understand why it's on the right (applied last)
divhunt generally doesn't mergre the styles between the selectors, they are like in css, so all specificity issues are present
I was just triyng to set a value on a class while having that value set on the tag
agreed about the confusing UI!
... and it keeps changing to something else confusing
