Change shadow color on dark tooltip

[VLuisa]

Added a light shadow to the dark tooltip to improve visibility against dark backgrounds:

Also updated all tooltip shadows to use drop-shadow for more accurate shading.

@tristen for approval

[tristen]

Ah! @VLuisa one thought: is it possible to use a stroke attribute on the arrow element?

mr-ui/src/components/tooltip/tooltip.tsx

Line 91 in 66a4740

<TooltipPrimitive.Arrow width={12} height={6} offset={6} fill={fill} />

I wonder if that might achieve the clean outline around the whole tooltip as you had proposed.

[VLuisa]

@tristen Good point! If I'm understanding correctly, I think that only gets it partway there? Because then each item has it's own stroke (illustrated with red here) as opposed to having one trace all the way around (which can be done but kind of in a hacky way which I'm not sure is worth it?)

[tristen]

Ah! @VLuisa thanks for trying that out! I wish stroke accepted positional color values 😞 I can almost achieve it using the drop-shadow filter property but it looks a little funky close-up.

Here's the CSS for that

{ 
  filter: drop-shadow(0 1px 0 red) drop-shadow(0 -1px 0 red) drop-shadow(1px 0 0 red) drop-shadow(-1px 0 0 red)
}

[VLuisa]

@tristen Ooh nice! This feels like it may work because it'd never be observed as closely as in a large screenshot?
Just to confirm the workflow, would this require adding a new CSS class in assembly?

[tristen]

Just to confirm the workflow, would this require adding a new CSS class in assembly?

I think this can be added as inline CSS because it's pretty specific to this option and doesn't require pseudo-selectors. Something like this?

import variables from '@mapbox/mbx-assembly/dist/variables.json';

return (
  <div style={{
    filter:  `
      drop-shadow(0 1px 0 ${variables['--gray-deep']})
      drop-shadow(0 -1px 0 ${variables['--gray-deep']})
      drop-shadow(1px 0 0 ${variables['--gray-deep']})
      drop-shadow(-1px 0 0 ${variables['--gray-deep']})
    `
  />
);

[VLuisa]

@tristen This (mostly) worked for the dark tooltip - as you said, if you don't look too closely.

So naturally, I tried applying it to all the tooltips and... it doesn't look great 😅

I'm leaning towards keeping the dark tooltip as it is in this PR so that they're all consistent. But we could also use this outline styling for just the dark tooltip - curious what you think!

[VLuisa]

@tristen can't re-request review through the github UI, but I made our proposed changes using drop-shadow!

[tristen]

I think this looks great!

[tristen]

Nice way to test this!