Better shared theming

[nickofthyme]

Is your feature request related to a problem? Please describe.
Currently, in kibana we use a Charts plugin to share a theme across all Chart instances. This is done by using either an observable or a react hook to get the theme and baseTheme then pass them to the Settings Chart component.

This is very repetitive and often overlooked, to where only two of the 20 or so usages are using this theme service.

Describe the solution you'd like
I'd like a way to share a component across all usages that implements the theming logic, then people can simply import this new ThemedChart component and override any theme values they desire.

Some kind of HOC that passes a baseTheme and theme to the Settings component. The issue is that you cannot simply create a HOC with props on a nested Child component. This would require changes to allow this functionality.

Maybe an easier but less ideal approach could be to provide a ThemedSettings HO component in kibana that passes around the correct theming. This would not require any changes to EC. Something like...

const MyComponent = () => (
  <Chart>
    <ThemedSettings theme={EuiThemeOverrides} {...otherSettingsProps} />
    {/* more goodness */}
  </Chart>
)

Checklist

• this request is checked against already exist requests

[markov00]

Yep definitely, I think we already discussed that with Caroline years ago, the ideas was to have a ThemedSettings exactly as you described. Here is an example: https://codesandbox.io/s/focused-satoshi-wrvi7?file=/src/App.tsx