[Frame] Add custom scrollbar styles for reframe

[sophschneider]

Edit: updated to use custom scrollbar styles instead of native ones

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-backlog/issues/1379

WHAT is this pull request doing?

https://admin.web.custom-scroll.sophie-schneider.us.spin.dev/store/shop1

Change	Why?
Adds a 2px margin to the right of the scrollbar	so it fits within the rounded corner container
Use custom scrollbar	Match our other scrollbars in the admin, hide the track so the right margin is less obvious. Using native scrollbars on safari and webkit pseudo selector doesn't respect user's OS scroll settings
Add lighter token for rest state of scrollbar	I cannot style the scrollbar thumb hover state without the webkit pseudo selector so this changes the scrollbar color depending on whether or not the user is hovering over the full scroll container

Potential future improvements

1. Add a larger margin on firefox so the scrollbar isn't cut off there
2. Implement and "Overlay scrollbar" when "Always show scrollbars" setting is on
3. Add border line for when "Always show scrollbars" setting is on to always show the scroll track even when there isn't scrollable content

See demo below where there isn't a layout shift for the "Always show scrollbars" setting on but it causes the content to look off centre because of the gutter.

How to 🎩

https://admin.web.custom-scroll.sophie-schneider.us.spin.dev/store/shop1

Tophat with OS scroll settings set to "Always" and "When scrolling" Check on chrome, firefox, safari, edge

🎩 checklist

• [x] Tested a snapshot
• [x] Tested on mobile
• [x] Tested on multiple browsers
• [x] Tested for accessibility

[sophschneider]

/snapit

[github-actions[bot]]

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/polaris-migrator": "0.0.0-snapshot-20240501202738",
"@shopify/polaris": "0.0.0-snapshot-20240501202738",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240501202738",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240501202738"

[sophschneider]

/snapit

[github-actions[bot]]

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/polaris-migrator": "0.0.0-snapshot-20240501235837",
"@shopify/polaris": "0.0.0-snapshot-20240501235837",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240501235837",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240501235837"

[sophschneider]

/snapit

[github-actions[bot]]

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/polaris-migrator": "0.0.0-snapshot-20240503143119",
"@shopify/polaris": "0.0.0-snapshot-20240503143119",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240503143119",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240503143119"

[sophschneider]

/snapit

[github-actions[bot]]

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/polaris-migrator": "0.0.0-snapshot-20240503184723",
"@shopify/polaris": "0.0.0-snapshot-20240503184723",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240503184723",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240503184723"

[sophschneider]

/snapit

[sophschneider]

putting this back in draft as we get feedback on two options

[github-actions[bot]]

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/polaris-migrator": "0.0.0-snapshot-20240506135640",
"@shopify/polaris": "0.0.0-snapshot-20240506135640",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240506135640",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240506135640"

[sophschneider]

/snapit

[github-actions[bot]]

🫰✨ Thanks @sophschneider! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/polaris-migrator": "0.0.0-snapshot-20240506163636",
"@shopify/polaris": "0.0.0-snapshot-20240506163636",
"@shopify/polaris-tokens": "0.0.0-snapshot-20240506163636",
"@shopify/stylelint-polaris": "0.0.0-snapshot-20240506163636"