Provide typing for theme, when an interpolation function is passed to css prop on EUI components

[eokoneyo]

Describe the bug

Currently EUI exposes the css prop on it's components to support extending styling on it's components, however when a function is passed the theme value is not typed. for instance the following;

 <EuiContextMenuItem
    icon="trash"
    css={({ euiTheme }) => ({ color: euiTheme.colors.danger })}
 >
  delete
</EuiContextMenuItem>

has euiTheme typed as any, which results in folks either typing it as any or ignoring with a ts comment directive, this can however be circumvented by extending the theme value within emotion (see here) to provide the correct type and improve developer experience.

Impact and severity
This is mostly a developer experience ask, especially that Shared UX is undertaking an initiative to nudge folks to adopt emotion over SCSS within Kibana

Environment and versions

• EUI version: 97.3.1

Expected behavior
Using interpolation function with the css prop should have euiTheme properly typed.

Minimum reproducible sandbox
Please refer to https://codesandbox.io/p/sandbox/qvjvhk

Screenshots

[cee-chen]

Hi Eyo - this is not an issue that EUI can fix, it's a required implementation of Emotion (see https://emotion.sh/docs/typescript#define-a-theme).

You will need to add an emotion.d.ts file in your Kibana plugin for the parameter in css functions to be properly typed as EUI's theme. See the osquery plugin for an example of their tsconfig setup.

I've added a specific section/question for this in our Emotion FAQ thread - feel free to refer other devs to it in the future.