[Infra UI] Add and use typed styled-components theme provider

[weltenwort]

Summary

This adds a specialization of the styled-components api, which is correctly typed according to the new theme variable type definitions included in EUI (elastic/eui#1750) and made available in Kibana via #33873.

Type-checked EUI theme variables make it more likely that breaking changes in the EUI variable definitions are noticed, which would have prevented #33411 and similar issues. This is has been attempted before in #24425 and #25516 using different means.

Since this is only a typing change, it should not have any visible effect except for the fixes for bugs that were discovered due to these changes.

Benefits

The typed styled components API allows the TypeScript language server to provide auto-completion on all available EUI variables:

It also enables the TypeScript compiler to check for presence of accesses variables:

All the usual refactorings and auto-fixes also work, of course:

Using the new typed eui theme

Making use of the types is a simple as replacing the imports from styled-components, e.g.

import styled from 'styled-components';

,with imports from the eui_styled_componenets module located in the x-pack/common directory:

import euiStyled from '../../../../../common/eui_styled_components';

Checklist

• This was checked for cross-browser compatibility, including a check against IE11
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
• This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[skh]

👍 LGTM