Fix a couple regressions found on V6 + Improve Slider hover UX

[jvdsande]

Hi :)

As discussed on Discord, here are some quick fixes for some regressions I found while updating my app from v5 to v6. I

I implemented each of them in individual commits; if you prefer I split those in individual PRs, I can too.

Here is a list of what's fixed:

• Arrow function positioning was using the raw pixel value, while the size of the arrow was using the new rem() helper. So arrow was not positioned correctly if the rem value was anything other than 16. Fixed by using rem() on positioning too.
• Still arrow function : removed the extra offset when there is a border, see comment below. I think a display might have changed from content box to border box somewhere.
• fn.rgba is used in more places, preventing CSS variables to be passed to some color props, instead it used a default black value. Added a check for CSS variables in fn.rgba, fn.lighten and fn.darken to prevent that.
• Added forwardRef to InlineInput so that it works like InputWrapper

The last commit is not a regression, it was something I already wanted to fix in v5:

• In Slider, when showLabelOnHover is true, it only works when hovering the track, not the thumb. Since the thumb is larger than the track, I added a listener on the thumb too, otherwise it was a bit awkward.

[jvdsande]

While playing with big REM units on the Storybook to check if the arrow was positioned correctly, I found that the -1 px offset was in fact unnecessary, even at base REM value of 16px. It added an imperceptible gap that became more and more visible with bigger REM values, already quite visible at REM = 20px.

So I removed it, and consequently removed the withBorder prop altogether since it did nothing else than that.

[jvdsande]

Here at REM = 32px:

Behavior if we keep the -1 offset:

[rtivital]

Thanks!