As a user I want to know which leaf is selected/active so that I know what I’m looking at

[gissoo]

What's in scope: the visual style of a selected leaf

[gissoo]

@rlskoeser @jhimpele please take a look at my proposals for the visual styles of a selected leaf here on figma – there are 9 proposals, numbered with short descriptions/identifiers.

Some notes below

• In most of the proposals I've tried to experiment with a customized outer glow effect to reduce the need for a new color for the active state
• You see more than one leaf is selected on the pages, this is for the purposes of showing you visual styles, ignore the logic here.
• The scope of this issue is only on the visual style of a selected leaf.

[rlskoeser]

@gissoo I love the glow! I'm not certain how to implement it with the SVG paths I'm using to draw the leaf shapes, but I think it should be feasible.

I prefer glow with outlines to just glow; I like 2 (active glow + outline matching leaf color) and 4 (black outline + yellow glow) best.

I dislike 7, 8, and 9. I think 6 (black outline only) would be a good fallback if the glow is not technically feasible.

[jhimpele]

Outer glow + outline - 1 is a winner! That is, the outline and leaf are same color. Fingers crossed @rlskoeser can make that happen.

[gissoo]

@rlskoeser @jhimpele thank you for the comments! I think we're very close in what we like here. I agree with your points, and hope we can make the glow happen.

Can you take a look at this new version with intensified glow and let me know if you still prefer the version with an outline? (named it 1.1 vs version 1 that you'd looked at this morning)

[jhimpele]

I prefer the original with the colored outline and less intense glow!

[rlskoeser]

@gissoo I also still prefer the version with the outline.

[rlskoeser]

@gissoo additional questions:

• does the label change visually when the leaf is selected?
• can we use the same selection style for hover?

[gissoo]

@jhimpele @rlskoeser ok – I'll adjust the colors a bit more carefully now that your decision is on the outline version.

@rlskoeser I wanted to ask you about this in person: I'd like to hold off on making a decision for the labels till we have a better view of the tree and the zoom levels, and spacing between the labels.
It may not be necessary to change the label visually, but if needed we can make it bold, only if the text wouldn't shift to the next line / if there won't be a shift in its placement, otherwise it won't be worth it.

[gissoo]

@rlskoeser @jhimpele Please take another look at the active leaves before we close. We've decided to proceed with the version that has both the outline and the glow. I worked on the following, and I've had to adjust the colors for the reasons below:

• because we are dealing with three dimensions/usages of color here (the fill color of the leaf, the outline, and the glow) I wanted to try and consolidate and use the same hex/color value for all instead of having to add more color variants (I think it was successful). As a result, we are using only one color value per leaf, what varies between the fill, outline, and the glow are the opacity and the darkness levels by %. I have also generated hex values for all these variants if useful for dev, but the root of all remains to be the original fill colors of the leaves, which was my goal.
• I needed to make sure the three combos, outline and the fill, and the outline and the glow pass for accessibility. That's done. The final result is reflective of accessibility requirements for color.

Note: I'm going to increase the points on this issue because of the complexities associated with this version and what was needed to be done to balance between accessibility reqs and aesthetics. For example there is no way to generate a hex value from an opacity % on figma, which is needed to test color accessibility, therefore I needed to add one more step there to experiment between % levels.

• I've saved the glow effects in the figma library – @rlskoeser let me know how you'd like me to hand it off to you.
• I've also updated the color table quickly to reflect these new color "values".

[gissoo]

Also, the hover state should stay the same as the active. Let's not discuss the styling for labels here. We can discuss at our meeting and/or another issue. This issue has gotten complicated enough. I've also created a separate issue for the leaf's focus state. (that is when you select a leaf using your keyboard instead of mouse/touchpad)

[rlskoeser]

Thanks @gissoo — the styles look good.

I'm not sure what's needed for hand-off. I see the glow effects in the library but I don't see how to inspect them. I would prefer to use the opacity levels via rgba colors. For the darkened version of the colors, I may be able to use a CSS filter to adjust brightness, but since you've already calculated the RGB I'm inclined to use that. Do you have a preference?

[jhimpele]

This looks good, though the outline on the red/orange leaves look a bit dark compared to leaf color. Also, can the outlines be thinner? Or are they that size for accessibility. Finally, I wonder if we will have to change the outlines and or glow size once there are more leafs....Or if the zooming will obviate that problem.....

[gissoo]

@jhimpele I've revised the thickness of the outline so it's now 3px instead of 4. I think it's making a lot of difference now, thanks for pointing it out, it was too thick. You can view them here on Figma

• The darkness of the outlines is because of the accessibility requirements, they are the lightest they can be right now.
• Fortunately, since we are using both the outline and the glow the active leaf will be visible even when overlapping with other leaves. (which will happen a lot more on mobile) – the contrasts between the outlines and the glows against the fill color of the leaves. Thanks for pointing this out!

@rlskoeser let's not mess with adjusting brightness, I already have them calculated, they were already there but here I've displayed them in the labels for you
regarding the glow effects you should be able to click on a leaf and see this

let me know, if not I can walk you through it.

[gissoo]

@jhimpele @rlskoeser let me know if we can close this issue.

[jhimpele]

Looks good to me, @gissoo . Thanks for explaining.

[rlskoeser]

@gissoo agreed, thanks for documenting & explaining.