The CSS --border-color variable is counterintuitive / styling the hover background seems hard

[rugk]

Bug description

I had a hard time:

• figuring out how to style the shadow/background of a selected emoji was hard. I mean like this:
  
• when I found out it is controlled by the --color-border CSS property I was very confused – as this is not about border.
• BTW, manually adding the RGB colors via simple , separated numbers/integers seems hard to edit and fiddle with browser tools, cannot we just use rgb(x,y,z)? AFAIK browser nowadays can still mix and blend things/colors quite good.

Steps to reproduce

This is more a UX/DX issue, so… without knowing the lib try to use https://learn.missiveapp.com/open/emoji-mart/example-custom-styles.html to figure out how to style emoji-mart, there is not really more doc. Browser tools are quite good but it still needs…

As it is dynamically set (via JS) apparently to the inline element, it's also not easily findable even if you manage to inpsect the element. In the end I found it in the CSS style editor and there, surprisingly, the variable turned up that affects it:

Actual behavior

Styling is very hard, especially for --border-color.

Expected behavior

I have no concrete idea, but UX/DX needs to be improved there. Maybe more docs? maybe a separate CSS variable for such styles?
Also if you e.g. want to decouple the actual border color from the other background colors?

System

Browser and version: Firefox 138
Emoji-mart v5.6.0

Possibly related: #658 as for styling