Improve styling and simplfy workflow example

[planger]

eclipse-glsp/glsp#492

[ndoschek]

Thanks Philip! I like the improved styling of the workflow example! 🎉
I spotted one potential issue with the dashed strokes, please see inline.

[ndoschek]

In general, I like the visual differentiation for selection/mouseover via dashed stroke. But due to the dashed line, edges might flicker on mouseover (see also screenshot). Maybe we could think of a solid line in a contrast color?

[planger]

Thanks Nina, you are right! We typically fix those issues by adding a transparent wider edge above the visible edge, which helps selection the edge too.
However, we also want to stay very generic, so probably dashes aren't a good choice for hover feedback.
I replaced it with opacity for now.
What do you think?
Also feel free to suggest different colors for the nodes if you don't like them.

[ndoschek]

Thanks Philip! The selection using opacity looks great!

I played around with the colors a bit, and using complementary colors for the nodes would look great to me, e.g. some darker orange (e.g. #db8651) and some teal (e.g. #5b9fa8).
This would also have the benefit that the blue selection color would give bit more contrast to both colors imo.
Also, I would suggest to use var(--theia-focusBorder) instead of var(--theia-menu-selectionBackground) as selection color, as it a bit brighter in dark mode as well.

Proposal in light theme:

Proposal in dark theme:

Also, I noticed two other issues:

• The weighted edges are not colored differently anymore
• The styling of the workflow standalone example: i.e. the resize handles differ from the selection color. Should we align that as well?

[planger]

Thanks @ndoschek!
I used your suggested colors, added different color for weighted edges, tested for color blindness (see below), used theia color for selection and handles in standalone.

Red-Weak/Protanomaly:

I think it still is nicely distinguishable.

[ndoschek]

Thanks a lot Philip, looks great to me! 🎉

Could you please update the file headers with the current year here as well, thanks!

[planger]

Sure, added 4495c41. Thanks!