Scrollbar design tokens

[jmanke]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

Currently, there is no way to customize the scrollbar style of components. In Dashboards, we have a custom scrollbar style that is globally applied. As we integrated calcite components, we observe differences between the default scrollbar styles of calcite-components, and our scrollbar styles.

We would like to control scrollbar styles as some OS + Browser's don't have visually appealing scrollbars, or they conflict with the theme the Dashboard is going for. For example, a dark themed Dashboard could have a very light colored scrollbar in Windows browsers.

cc @ffaubry @jcfranco @vijayendranj

Acceptance Criteria

A way to customize components' scrollbar styles (when they are in the shadow root) - the first thought is to use design tokens (CSS variables).

Relevant Info

No response

Which Component

Any component that has a scrollbar inside of the shadow root.

Example Use Case

Dashboards look beautiful, cohesive, and focused. Scroll bars play into that. When they don't look right (too big, not right color, different across elements), they detract from those qualities. Being able to apply scrollbars styles to all relevant calcite-components will ensure the application's style is consistent and aligns with our styling goals.

Priority impact

p4 - not time sensitive

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [X] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Dashboards

[jcfranco]

Discussed this with the team and we would need to wait for scrollbar-width and scrollbar-color to be widely supported across browsers for this. Safari is the only one lacking support, but it looks that might change soon based on the following WebKit PRs: https://github.com/WebKit/WebKit/pull/14597, https://github.com/WebKit/WebKit/pull/13992.

Testing on browsers that support this show these styles piercing through shadow DOM: https://codepen.io/jcfranco/pen/OJqOvgG.

[macandcheese]

@jcfranco maybe we could expose some non-public css variables here for Esri teams that want to adopt despite the limited browser support?

This could help reduce future breaking change cc @vijayendranj

[vijayendranj]

//cc @ffaubry This is something web components team may also be interested.

[geospatialem]

For design to consider implementation on consistency with scrollbar styling.

Of note Safari would not have support as mentioned in Franco's comment above.

[DitwanP]

Spike to determine if we actually want to allow this, then if so which options to make available - research all the available pseudo elements in css, audit what other systems may offer, etc.