fix(sdk): default font not working (#47712)

* fix(sdk) default font on not working

* fix initial state for the sdk

enterprise/frontend/src/embedding-sdk/components/private/SdkThemeProvider.tsx

@@ -8,6 +8,7 @@ import {
 } from "embedding-sdk/lib/theme";
 import { useSelector } from "metabase/lib/redux";
 import { getSettings } from "metabase/selectors/settings";
+import { getFont } from "metabase/styled-components/selectors";
 import { getMetabaseSdkCssVariables } from "metabase/styled-components/theme/css-variables";
 import { ThemeProvider, useMantineTheme } from "metabase/ui";
 import { getApplicationColors } from "metabase-enterprise/settings/selectors";
@@ -32,13 +33,15 @@ export const SdkThemeProvider = ({ theme, children }: Props) => {
 
   return (
     <ThemeProvider theme={themeOverride}>
-      <GlobalStyles />
+      <SDKGlobalStyles />
       {children}
     </ThemeProvider>
   );
 };
 
-function GlobalStyles() {
+function SDKGlobalStyles() {
   const theme = useMantineTheme();
-  return <Global styles={getMetabaseSdkCssVariables(theme)} />;
+  const font = useSelector(getFont);
+
+  return <Global styles={getMetabaseSdkCssVariables(theme, font)} />;
 }

enterprise/frontend/src/embedding-sdk/store/index.ts

@@ -20,6 +20,7 @@ export const sdkReducers = {
 
 export const store = getStore(sdkReducers, null, {
   embed: {
+    options: {},
     isEmbeddingSdk: true,
   },
   app: {

frontend/src/metabase/styled-components/theme/css-variables.ts

@@ -34,9 +34,10 @@ export function getMetabaseCssVariables(theme: MantineTheme) {
   `;
 }
 
-export function getMetabaseSdkCssVariables(theme: MantineTheme) {
+export function getMetabaseSdkCssVariables(theme: MantineTheme, font: string) {
   return css`
     :root {
+      --mb-default-font-family: ${font};
       ${getSdkDesignSystemCssVariables(theme)}
       ${getThemeSpecificCssVariables(theme)}
     }
@@ -53,8 +54,6 @@ export function getMetabaseSdkCssVariables(theme: MantineTheme) {
  **/
 function getSdkDesignSystemCssVariables(theme: MantineTheme) {
   return css`
-    --mb-default-font-family: "${theme.fontFamily}";
-
     /* Semantic colors */
     /* Dynamic colors from SDK */
     ${Object.entries(SDK_TO_MAIN_APP_COLORS_MAPPING).flatMap(