The same applies to Tokens. They also look identical, whether they hold data or not.
One might say – "why should I create a token and leave it empty" – but learners do such. A great example is trying to turn your last actions into a reusable style. What you should have used is "Convert to Token" on Local. But you simply created a Token and hope that it stores the latest state (it, of course, remains empty).
Wouldn't it help to introduce an identifier for "empty"? Yet more colours likely could confuse, but there were other ways to make this statement.
These are issues, which cause me far more pain than the exact placement and styling of the Local Tag. 😃
The function of their color has not been to show the emptiness state
So far you need to watch for color labels
In a collapsed state there is also an indication but no way to see them all at once, so maybe one-click collapse-expand would work for this?
If you only add a Hover or a line in Advanced, that may be real hard to spot.
I consider this one of my top 3 UX problems with Webstudio.
Then it needs some smart solution
Not another color, but something else
Sketches showing possible active states, which also indicate when they hold no data (→ no need to double-check the style panel for accidental local data).
The inactive state would remain grey. As soon a Tag or Local hold data, all graphics look the same as they do now.
Of all shapes, I like full rounded best. In the rare event that an assigned Token is empty, it becomes immediately obvious. Having empty Local Tags will occur a lot more often – but them being rounded only on the left emphasizes the end of the list.
Image 2 shows active empty and active, holding styles.
I like this lil dot in the corner!
for this dot to have space, the current token shape works best
This definedly only meant a minimal GUI change.
but its also nice probably
isn't apparent though immediately what the hole means
I did not find any Tag styling that indicates "I am sempty". A little point is at least often used as a notifier: This deserves your attention.
if the point would use a color of the style source color coding that would probably do it
only problem is that active token is same color as current style source
and a token can have styles from multiple breakpoints, so in theory the dot would need to be multicolored lol
another option is to use blue dot on tokens when they are not selected, indicated they hold some value
and no dot when they are selected
or the white dot when selected
I did not want to overload this little indicator. My thought was strictly I do not hold own data. Empty should be visible, regardless whether inactive or selected.
As it is extremely likely that element inherit styles from somewhere else, there would always be dots, even in several colours. If onmipresent, the dot would lose its power. Generally this would be another topic – I need just an empty-flag.
so white dot present is "holding data" or "empty"?
I can interpret it both ways, "a hole" means its empty or "marked" - means not empty
Empty. As soon as data is present it is filled (one could envision it as a fill state indicator of a tank).
it could even have a slight bump using shadow in filled state
you know like the fill indicator is high up
Local gets filled with blue data, Tokens with lilac data.
