From 28351649395d8072cefbe1cc83993e7804a19183 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Pretto?= <info@npretto.com>
Date: Fri, 6 Sep 2024 17:40:32 +0200
Subject: [PATCH] fix(sdk): default font not working (#47712)
* fix(sdk) default font on not working
* fix initial state for the sdk
---
.../components/private/SdkThemeProvider.tsx | 9 ++++++---
enterprise/frontend/src/embedding-sdk/store/index.ts | 1 +
.../metabase/styled-components/theme/css-variables.ts | 5 ++---
3 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/enterprise/frontend/src/embedding-sdk/components/private/SdkThemeProvider.tsx b/enterprise/frontend/src/embedding-sdk/components/private/SdkThemeProvider.tsx
index 3c898302a91..c6932e6e609 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/SdkThemeProvider.tsx
+++ b/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)} />;
}
diff --git a/enterprise/frontend/src/embedding-sdk/store/index.ts b/enterprise/frontend/src/embedding-sdk/store/index.ts
index 88e7b73400b..5be403a894f 100644
--- a/enterprise/frontend/src/embedding-sdk/store/index.ts
+++ b/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: {
diff --git a/frontend/src/metabase/styled-components/theme/css-variables.ts b/frontend/src/metabase/styled-components/theme/css-variables.ts
index 438667482aa..604b8c20930 100644
--- a/frontend/src/metabase/styled-components/theme/css-variables.ts
+++ b/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(
--
GitLab