[Epic] Basic theming for React embedding SDK

[heypoom]

Allow SDK users to customize the appearance of React components in the interactive embedding SDK, by exposing a theme configuration prop to the MetabaseProvider.

We achieve this by converting a subset of Emotion components to use Mantine components from metabase/ui. This would allow a subset of user's themes (e.g. color palette, fonts, base font sizes) to be applied to the embedded components, such as tables, popovers and filters.

In addition, we will expose custom theme configurations for users to be able to customize specific theme options, which is then merged/injected into target component's styles. This epic focuses on basic theming to match the SDK user's app branding, such as color palette, base font sizes, font family and line height.

Links

• product doc
• tech doc
• feature branch: embedding-sdk-theming

Implementation Plan

Milestone 1

Expose theme configuration to MetabaseProvider

Beta Give feedback

1. Expose basic theme configuration to the MetabaseProvider in embedding SDK #41948
   +0
   
2. Define a public metabase theme type and Mantine transformer for embedding SDK #42201
   +0
   
3. Support custom fonts in embedding SDK #42214
   +0
   

Milestone 2

Basic theming for question visualizations

Beta Give feedback

1. Cartesian charts labels should inherit color from Mantine theme in React embedding #41949
   +0
   
2. Remove extraneous paddings from cartesian charts in React embedding #42157
   +0
   
3. Option to customize base font size for React embedding #42321
   +0
   
4. Questions should render without a fixed-height flexbox parent in React embedding #42199
   +0
   
5. Smart scalar should follow the Mantine theme with proper defaults in React embedding #42159
   +0
   
6. Data tables should follow the Mantine theme with proper defaults in React embedding #42158
   +0
   

Milestone 3

Basic theming for interactive questions

Beta Give feedback

1. Interactive question popovers and filters should follow the embedding theme #42560
   +0