Improve the visibility of the popup menu

[rpkoller]

Is your feature request related to a problem? Please describe
that is a bit of a controversial issue. it is basically in reference to WCAG2.1 SC 1.4.11 which is usually interpreted in the context of single ui components like buttons and alike. but if you have a model and open up the element template chooser it is quite challenging to find and focus on the modal. One example in Camunda:

and one example in ECA in Drupal:

in Camunda:
0px 2px 10px var(--change-menu-shadow-color)the value of the variable is hsla(0, 0%, 0%, 25%); which leads to:
https://contrast-ratio.com/#hsla%280%2C%200%25%2C%200%25%2C%2025%25%29-on-white
=> color contrast of 1.83:1 but 3:1 is needed.

in ECA:
0px 2px 10px var(--popup-shadow-color) the value of the variable is hsl(225, 10%, 80%); which leads to:
https://contrast-ratio.com/#hsl%28225%2C%2010%25%2C%2080%25%29-on-white
=> color contrast of 1.65:1 but 3:1 is needed.

Describe the solution you'd like
Ideally the element template chooser modal should stand out more clearly so it is easier to distinguish what is the model and what is a widget/modal.
strictly speaking that issue applies to the toolbar and the properties panel to a certain degree as well. but due to the fact that the element template chooser has a white background color same like the background of the canvas and it is only separated by the box shadow makes it more of an issue for the element template chooser.

Describe alternatives you've considered

Additional context

[nikku]

A simple way to improve the visual apperance could be to provide a dedicated border:

CC @YanaSegal Maybe way we can fine-tune this?

[nikku]

Moved over to bpmn-js as we have the same issue in core modeling (and the chooser component depends on that).

[barmac]

To be honest, I like the bordered version more.

[nikku]

We decided to go for option 3️⃣ Align with Carbon Design for the basics and slightly improve shadow.

[nikku]

@rpkoller via bpmn-io/diagram-js#743 we'll improve the background shadow to better set off the element.

In addition you may customize the popup menu border through the --popup-menu-border CSS variable.

[nikku]

Closed with 496c6f6.