feat: applies color-scheme to align garden and system themes

[geotrev]

Description

Currently, system controls (scrollbars) are forced to their default color even in Garden dark mode (normal).

This PR sets the color-scheme property throughout several components to ensure system controls switch between light and dark theme alongside Garden's theme.

Detail

To ensure the theme is retained regardless of system settings, the value is set using the only keyword (see spec).

To test, I include the following snippet inside the content of the affected component in dark theme (and then swap the value to dark when testing light theme).

<ThemeProvider theme={pt => ({ ...pt, colors: { ...pt.colors, base: 'light' } })}>
  Nested content
</ThemeProvider>

I then applied overflowY or overflowX with auto to containers that can be scrollable. To create constrain, maxHeight and maxWidth were added to either the component itself OR a containing div. These testing parameters help mimic real world scenarios where a consumer could reach for either option to achieve constrained content dimensions.

For example, compare direct component constrain (note Tabs and Tab.TabPanel):

<Tabs {...args} style={{ maxWidth: 250 }}>
  <Tabs.TabList style={{ overflowY: 'auto' }}>
    {tabs.map(tab => (
      <Tabs.Tab key={tab.value} item={tab.value} disabled={tab.disabled}>
        {tab.value}
      </Tabs.Tab>
    ))}
  </Tabs.TabList>
  {tabs.map(tab => (
    <Tabs.TabPanel key={tab.value} item={tab.value} style={{ overflowY: 'auto', maxHeight: 200 }}>
      {tab.panel}
    </Tabs.TabPanel>
  ))}
</Tabs>

With container-based constrain using div, meant to simulate page layout constraints:

<div style={{ maxWidth: 250, maxHeight: 300 }}>
  <Tabs {...args}>
    <Tabs.TabList style={{ overflowY: 'auto' }}>
      {tabs.map(tab => (
        <Tabs.Tab key={tab.value} item={tab.value} disabled={tab.disabled}>
          {tab.value}
        </Tabs.Tab>
      ))}
    </Tabs.TabList>
      <Tabs.TabPanel key={tab.value} item={tab.value} style={{ overflowY: 'auto' }}>
        {tab.panel}
      </Tabs.TabPanel>
  </Tabs>
</div>

---

List of components + screenshots below.

Chrome (Content + Sheet)

Grid

Modal

Drawer

TooltipModal

Menu

Combobox

Multiselectable scrolling

Listbox

Pane (PaneProvider)

Tabs (TabList + TabPanel)

Exclusions

• Accordions: Scrolling in accordion content could be seen as an anti-pattern. I didn't see much precedence for this in the wild either. Given we need to support the animation for expand/collapse, anything other than a static height would break animation behavior anyway.
• Tables: The table element itself is not recommended to receive scrolling, and instead can use an external wrapper as suggested in Garden's API docs. In this case, consumers should set color-scheme on the wrapper. We can update the website example to include it.

Checklist

• [ ] :ok_hand: design updates will be Garden Designer approved (add the designer as a reviewer)
• [x] :globe_with_meridians: demo is up-to-date (npm start)
• :arrow_left: renders as expected with reversed (RTL) direction
• [x] :metal: renders as expected with Bedrock CSS (?bedrock)
• :guardsman: includes new unit tests. Maintain existing coverage (always >= 96%)
• :wheelchair: tested for WCAG 2.1 AA accessibility compliance
• [x] :memo: tested in Chrome, Firefox, Safari, and Edge

[geotrev]

Are we missing the Combobox trigger?

@jzempel Good catch, updated!

[geotrev]

I can wait to test Combobox when #1872 merges, assuming there are any differences in behavior.