Fixed scrollbar colors for dark mode

[cchaos]

Fixes #4423

Uses the euiScrollBar() mixin at the html level and adding a 3rd parameter for $size with the default being thin (as it were) and allowing thick to maintain the larger size for the overall page.

Firefox: The thin usage used to be applied at the root level for Firefox, but now it's the thick version. This could mean Firefox instances of scrolling containers are no longer “thin” if consumers didn't manually apply the mixin. But Chrome would have been using the stock scrollbar anyway.

Safari: None of these styles affect Safari at the html level. But that's ok because it was already adhering to the theme switch.

BEFORE

AFTER

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs and playground toggles
• [ ] Added documentation
• [ ] Checked Code Sandbox works for the any docs examples
• [ ] Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4969/

[snide]

Tested and checked code. LGTM.

[miukimiu]

Tested in Chrome, Safari, Edge, Brave and Firefox. I also looked at the code and LGTM! 🎉

But I noticed something... In all browsers, the scrollbar only appears when we start scrolling except in Chrome.

This is a screenshot of what I'm seeing without even interacting with the page in Chrome. The scrollbar is visible by default.

Before this change, the scrollbar would only appear once we started scrolling.

Is this new behavior expected?

[cchaos]

Oh interesting... it must be forcing this system preferences behavior. IIRC, the default setting is the second option. I have the first one checked, so there didn't seem to be any change for me. Wondering if it's truly a bad thing... 🤔

I can see arguments for both:

• Forcing an always visible scrollbar is more helpful for actually indicating that "this page scrolls"
• Overriding a user's specified setting may be un-welcomed (but some may not even know its a setting)

One other plus, that I just checked on, is that with that first option checked when I only have a trackpad usage, it shows a scrollbar weirdly like this (on Chrome) which could then overlap necessary content.

As for mobile, I pulled it up on my phone and it didn't have any affect from before. So 👍 🤷

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4969/

[cchaos]

I'm gonna merge in, and keep an ear out for any concerns. Thanks both!

[ryankeairns]

Thanks for this!