fix(sdk): missing css variables when rendering under a portal

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

@@ -7,7 +7,7 @@ import { useSdkSelector } from "embedding-sdk/store";
 import { getIsInitialized } from "embedding-sdk/store/selectors";
 import type { SDKConfig } from "embedding-sdk/types";
 
-import { SdkContentWrapper } from "./SdkContentWrapper";
+import { SdkGlobalStylesWrapper } from "./SdkGlobalStylesWrapper";
 
 interface AppInitializeControllerProps {
   children: ReactNode;
@@ -25,11 +25,11 @@ export const AppInitializeController = ({
   const isInitialized = useSdkSelector(getIsInitialized);
 
   return (
-    <SdkContentWrapper
+    <SdkGlobalStylesWrapper
       baseUrl={config.metabaseInstanceUrl}
       id={EMBEDDING_SDK_ROOT_ELEMENT_ID}
     >
       {!isInitialized ? <div>{t`Loading…`}</div> : children}
-    </SdkContentWrapper>
+    </SdkGlobalStylesWrapper>
   );
 };

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

@@ -0,0 +1,87 @@
+import styled from "@emotion/styled";
+import type { ReactNode } from "react";
+
+import { color } from "metabase/lib/colors";
+import { useThemeSpecificCssVariables } from "metabase/styled-components/theme/theme";
+
+/**
+ * Injects CSS variables and styles to the SDK components underneath them.
+ * This is to ensure that the SDK components are styled correctly,
+ * even when rendered under a React portal.
+ */
+export function PublicComponentStylesWrapper({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const themeSpecificCssVariables = useThemeSpecificCssVariables();
+
+  return (
+    <StylesWrapperInner themeSpecificCssVariables={themeSpecificCssVariables}>
+      {children}
+    </StylesWrapperInner>
+  );
+}
+
+const StylesWrapperInner = styled.div<{
+  themeSpecificCssVariables: string;
+}>`
+  /* NOTE: DO NOT ADD COLORS WITHOUT EXTREMELY GOOD REASON AND DESIGN REVIEW
+   * NOTE: KEEP SYNCHRONIZED WITH:
+   * frontend/src/metabase/ui/utils/colors.ts
+   * frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
+   * frontend/src/metabase/css/core/colors.module.css
+   * .storybook/preview-head.html
+   */
+  --mb-default-font-family: "${({ theme }) => theme.fontFamily}";
+  --mb-color-bg-light: ${({ theme }) => theme.fn.themeColor("bg-light")};
+  --mb-color-bg-dark: ${({ theme }) => theme.fn.themeColor("bg-dark")};
+  --mb-color-brand: ${({ theme }) => theme.fn.themeColor("brand")};
+
+  --mb-color-brand-light: color-mix(in srgb, var(--mb-color-brand) 53%, #fff);
+  --mb-color-brand-lighter: color-mix(in srgb, var(--mb-color-brand) 60%, #fff);
+  --mb-color-brand-alpha-04: color-mix(
+    in srgb,
+    var(--mb-color-brand) 4%,
+    transparent
+  );
+  --mb-color-brand-alpha-88: color-mix(
+    in srgb,
+    var(--mb-color-brand) 88%,
+    transparent
+  );
+
+  --mb-color-focus: ${({ theme }) => theme.fn.themeColor("focus")};
+  --mb-color-bg-white: ${({ theme }) => theme.fn.themeColor("bg-white")};
+  --mb-color-bg-black: ${({ theme }) => theme.fn.themeColor("bg-black")};
+  --mb-color-shadow: ${({ theme }) => theme.fn.themeColor("shadow")};
+  --mb-color-border: ${({ theme }) => theme.fn.themeColor("border")};
+  --mb-color-text-dark: ${({ theme }) => theme.fn.themeColor("text-dark")};
+  --mb-color-text-medium: ${({ theme }) => theme.fn.themeColor("text-medium")};
+  --mb-color-text-light: ${({ theme }) => theme.fn.themeColor("text-light")};
+  --mb-color-danger: ${({ theme }) => theme.fn.themeColor("danger")};
+  --mb-color-error: ${({ theme }) => theme.fn.themeColor("error")};
+  --mb-color-filter: ${({ theme }) => theme.fn.themeColor("filter")};
+  --mb-color-bg-error: ${() => color("bg-error")};
+  --mb-color-bg-medium: ${({ theme }) => theme.fn.themeColor("bg-medium")};
+  --mb-color-bg-night: ${() => color("bg-night")};
+  --mb-color-text-white: ${({ theme }) => theme.fn.themeColor("text-white")};
+  --mb-color-success: ${({ theme }) => theme.fn.themeColor("success")};
+  --mb-color-summarize: ${({ theme }) => theme.fn.themeColor("summarize")};
+  --mb-color-warning: ${({ theme }) => theme.fn.themeColor("warning")};
+
+  /**
+    Theming-specific CSS variables.
+    Keep in sync with [GlobalStyles.tsx] and [.storybook/preview-head.html].
+
+    Refer to DEFAULT_METABASE_COMPONENT_THEME for their defaults.
+
+    These CSS variables are not part of the core design system colors.
+    Do NOT add them to [palette.ts] and [colors.ts].
+  */
+  ${({ themeSpecificCssVariables }) => themeSpecificCssVariables}
+
+  :where(svg) {
+    display: inline;
+  }
+`;

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

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import { t } from "ttag";
 
+import { PublicComponentStylesWrapper } from "embedding-sdk/components/private/PublicComponentStylesWrapper";
 import { SdkError } from "embedding-sdk/components/private/PublicComponentWrapper/SdkError";
 import { SdkLoader } from "embedding-sdk/components/private/PublicComponentWrapper/SdkLoader";
 import { useSdkSelector } from "embedding-sdk/store";
@@ -29,5 +30,7 @@ export const PublicComponentWrapper = ({
     return <SdkError message={loginStatus.error.message} />;
   }
 
-  return children;
+  return (
+    <PublicComponentStylesWrapper>{children}</PublicComponentStylesWrapper>
+  );
 };

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

@@ -0,0 +1,57 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import type { HTMLAttributes } from "react";
+
+import { rootStyle } from "metabase/css/core/base.styled";
+import { defaultFontFiles } from "metabase/css/core/fonts.styled";
+import { useSelector } from "metabase/lib/redux";
+import { aceEditorStyles } from "metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled";
+import { getFontFiles } from "metabase/styled-components/selectors";
+import { saveDomImageStyles } from "metabase/visualizations/lib/save-chart-image";
+import type { FontFile } from "metabase-types/api";
+
+interface SdkContentWrapperProps {
+  baseUrl?: string;
+}
+
+export function SdkGlobalStylesWrapper({
+  baseUrl,
+  ...divProps
+}: SdkContentWrapperProps & HTMLAttributes<HTMLDivElement>) {
+  const fontFiles = useSelector(getFontFiles);
+
+  return (
+    <SdkGlobalStylesInner
+      baseUrl={baseUrl}
+      fontFiles={fontFiles}
+      {...divProps}
+    />
+  );
+}
+
+const SdkGlobalStylesInner = styled.div<
+  SdkContentWrapperProps & {
+    fontFiles: FontFile[] | null;
+  }
+>`
+  font-size: ${({ theme }) => theme.other.fontSize};
+
+  ${aceEditorStyles}
+  ${saveDomImageStyles}
+  ${rootStyle}
+
+  ${({ baseUrl }) => defaultFontFiles({ baseUrl })}
+
+  ${({ fontFiles }) =>
+    fontFiles?.map(
+      file => css`
+        @font-face {
+          font-family: "Custom";
+          src: url(${encodeURI(file.src)}) format("${file.fontFormat}");
+          font-weight: ${file.fontWeight};
+          font-style: normal;
+          font-display: swap;
+        }
+      `,
+    )}
+`;

frontend/src/metabase/css/core/colors.module.css

@@ -2,7 +2,7 @@
  * NOTE: KEEP SYNCRONIZED WITH:
  * frontend/src/metabase/ui/utils/colors.ts
  * frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
- * enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx
+ * enterprise/frontend/src/embedding-sdk/components/private/PublicComponentStylesWrapper.tsx
  * .storybook/preview-head.html
  */
 :root {

frontend/src/metabase/lib/colors/palette.ts

@@ -10,7 +10,7 @@ export const ACCENT_COUNT = 8;
 // NOTE: KEEP SYNCRONIZED WITH:
 // frontend/src/metabase/css/core/colors.module.css
 // frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
-// enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx
+// enterprise/frontend/src/embedding-sdk/components/private/PublicComponentStylesWrapper.tsx
 // .storybook/preview-head.html
 export const colors = {
   brand: "#509EE3",

frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx

@@ -6,7 +6,7 @@ import { alpha, color, lighten } from "metabase/lib/colors";
 import { getSitePath } from "metabase/lib/dom";
 import { useSelector } from "metabase/lib/redux";
 import { aceEditorStyles } from "metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled";
-import { useThemeSpecificSelectors } from "metabase/styled-components/theme/theme";
+import { useThemeSpecificCssVariables } from "metabase/styled-components/theme/theme";
 import { saveDomImageStyles } from "metabase/visualizations/lib/save-chart-image";
 
 import { getFont, getFontFiles } from "../../selectors";
@@ -15,7 +15,7 @@ export const GlobalStyles = (): JSX.Element => {
   const font = useSelector(getFont);
   const fontFiles = useSelector(getFontFiles);
 
-  const themeSpecificSelectors = useThemeSpecificSelectors();
+  const themeSpecificSelectors = useThemeSpecificCssVariables();
 
   const sitePath = getSitePath();
 

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

@@ -19,10 +19,10 @@ type MetabaseComponentThemeKey = FlattenObjectKeys<MetabaseComponentTheme>;
   Theming-specific CSS variables.
   These CSS variables are not part of the core design system colors.
 **/
-export const useThemeSpecificSelectors = () => {
+export const useThemeSpecificCssVariables = () => {
   const theme = useMantineTheme();
 
-  //  get value from theme.other, which is typed as MetabaseComponentTheme
+  // Get value from theme.other, which is typed as MetabaseComponentTheme
   const getValue = (key: MetabaseComponentThemeKey) => get(theme.other, key);
 
   return `
@@ -42,6 +42,5 @@ export const useThemeSpecificSelectors = () => {
     --mb-color-bg-collection-browser-expand-button-hover: ${getValue(
       "collectionBrowser.breadcrumbs.expandButton.hoverBackgroundColor",
     )};
-
   `;
 };