refactor(css): refactor autocomplete to use common css vars

[FabienMotte]

Summary

This PR:

• Refactors the Autocomplete component styles to use common CSS variables.
• Fixes the InstantSearch.css DevTools exports and adds support for new dimensions.
• Fixes some styles.
• Disables the dark mode media query for now, until all widgets support dark mode.

Result

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2fe2e6c:

Sandbox	Source
example-instantsearch-getting-started	Configuration
example-react-instantsearch-getting-started	Configuration
example-react-instantsearch-next-app-dir-example	Configuration
example-react-instantsearch-next-routing-example	Configuration
example-vue-instantsearch-getting-started	Configuration

[Haroenv]

👌

[aymeric-giraudet]

Colors look a bit lighter than before, I think it may be because Autocomplete was using some arbitrary alpha values before.
Is it possible to make it aligned with what we had before ?

[FabienMotte]

Colors look a bit lighter than before, I think it may be because Autocomplete was using some arbitrary alpha values before.
Is it possible to make it aligned with what we had before ?

@aymeric-giraudet Now it should look more subtle. For the color, I'm using the example header gradient first stop color as the primary color, and using it to mix it with the background color. This way I only need a primary color, whereas in Autocomplete.js, a different color/alpha is used as the selected color.

background-color: color-mix(
  in srgb,
  rgb(var(--ais-primary-color-rgb)) 10%, /* I updated this value */
  rgb(var(--ais-background-color-rgb))
);

WDYT?

[FabienMotte]

@aymeric-giraudet By the way, I noticed that the autocomplete item's aria-selected attribute is not updated to true on hover, it only changes when the keyboard arrows are used. Is this expected?

[Haroenv]

yes, as that's the WAI-ARIA suggestion. The mouse is only only used for clicking and the keyboard for selection.

[FabienMotte]

yes, as that's the WAI-ARIA suggestion. The mouse is only only used for clicking and the keyboard for selection.

Makes sense, then I guess Autocomplete.js implem is wrong, aria-selected is updated on hover