The dialog modal extent is invisible against a white highlighted element in the background

Will
outline: 3px solid black;

be enough?

3px solid black would be more than enough. i worry that it might be even too strong visually.

i've taken a look at the drupal design system at: https://www.figma.com/design/OqWgzAluHtsOd5uwm1lubFeH/💧-Drupal-Design-system?node-id=10154-0&t=VmN7KSHpguxzhIGq-0

maybe orient to the styling of a card in general? well there is also a dedicated section for the tour but that is a work in progress. and i am not sure how the black modal will work with the dark grey background.

I would question how up to date figmas really are.

It could be a one liner just need to do know what pixel width and color is desired

yeah i also doubt that at least the designs for the tour module with those dark backgrounds are up to date nor reflecting the current design styles. i was more drawn towards the style which is used for the cards. but that had the downside of a too low color contrast for the outline. so maybe you could add the one-liner you suggested with outline: 3px solid black just to see that change in context?

ok even though the outline got added to the highlighted ui component, it already gives an idea how 3px solid black would look like for the tour tip dialog modal and i would say that it is visually too strong and breaking the overall look and feel. guess solid black also with less pixels might be too strong? so maybe we should try with the drop shadow used on the cards component in the drupal design system instead? it might have too less color contrast and might need further work but that might be moved to a follow up where we could ask for example @ckrina? but the current MR applied looks like that:

So I need to know what color and pixel to use.

Maybe we can use the same color we used in the focus ticket.

and in regards of the added outline color i am not sure if that isn't breaking the visual style too much.

i've tried something else. i've simply tried:

.shepherd-enabled.shepherd-element {
  border: var(--card-border-size) solid var(--card-border-color);
  border-radius: var(--card-border-radius-size);
  box-shadow: var(--card-box-shadow);
}

which is basically the css used for cards. the grey is still too light. but i guess by using a grey border and combine it with some box shadow that should work. against the grey shepherd background it simply vanishes which is a good thing while it still provides a way to distinguish between the tour tip and the highlighted element. according tot the drupal design system the card border is using --color-gray-100 (Light Diamond - Layer border)

but as i said with the color choices used for cards the border is too light right now on the screenshot.

If those are global variables sure but I want to avoid variables from specific themes even core ones

Took the values out of claro and just hardcoded them thoughts?

The values from claro arent perfect, meaning strictly speaking they are also not meeting the SC1.4.11 requirement of 3:1. i've tested the current feature branch now, there are a few details i've noticed.
first have you changed anything on the positioning of the tips??? cuz with the current feature branch the tip dialogs are positioned next to the highlighted area on desktop viewports with enough space. that way the dialog modal is clearly visible. before the dialog was overlapping or completely overlaying the highlighted area which lead to the initial issue creation. and the white dialog modal against the greyed out background has also enough color contrast to meet SC1.4.11 (rgb(127,127,127) against rgb(255,255,255) which means 4:1). i then went ahead and took a look at things on an iphone 14.

also there it is sort of possible to recognize and differentiate between the tip and the highlighted element. due to the fact that the highlighted element has a border and therefore you have two darkish bars on both sides while the tip spans across the entire viewport without a margin it is possible to distinguish both element. but it also illustrates that the claro card borders have a too low color contrast as you can see with the tip arrow in ios2.png, the arrow is hard to distinguish against the white background of the highlighted element (in io1.png the arrow is in front of a dark image). so in the current state definitely an improvement and also in line with claro. not sure how to proceed. should the hardcoded claro styles be adjusted and the border get a bit darker and or the drop shadow be a bit stronger? or is the current state improvement enough for now and those border styling should be moved to a follow up?

Automatically closed - issue fixed for 2 weeks with no activity.