fix(sdk): Various fixes for InteractiveQuestion theming (#42932)

* Fixes for InteractiveQuestion theming

* Update readme

* Fix for unset filter theme color

* Fix unit tests

* Fix unit tests

enterprise/frontend/src/embedding-sdk/README.md

@@ -280,6 +280,9 @@ const theme = {
 
     /** Color used for aggregations and breakouts context */
     summarize: "#88BF4D",
+
+    /** Color used for popover shadows */
+    shadow: "rgba(0,0,0,0.08)",
   },
 
   table: {

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

@@ -46,6 +46,8 @@ const SdkContentWrapperInner = styled.div<
   --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")};
 
   ${aceEditorStyles}
   ${saveDomImageStyles}
@@ -66,7 +68,7 @@ const SdkContentWrapperInner = styled.div<
       `,
     )}
 
-  svg {
+  :where(svg) {
     display: inline;
   }
 `;

enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts

+import type { MantineThemeOverride } from "@mantine/core";
 import { merge } from "icepick";
 
 import type { MetabaseComponentTheme } from "embedding-sdk";
+import { EMBEDDING_SDK_ROOT_ELEMENT_ID } from "embedding-sdk/config";
 
 /**
  * Default theme options for Metabase components.
@@ -32,3 +34,15 @@ export const DEFAULT_EMBEDDED_COMPONENT_THEME: MetabaseComponentTheme = merge(
     },
   },
 );
+
+export const EMBEDDING_SDK_COMPONENTS_OVERRIDES: MantineThemeOverride["components"] =
+  {
+    HoverCard: {
+      defaultProps: {
+        withinPortal: true,
+        portalProps: {
+          target: `#${EMBEDDING_SDK_ROOT_ELEMENT_ID}`,
+        },
+      },
+    },
+  };

enterprise/frontend/src/embedding-sdk/lib/theme/embedding-color-palette.ts

@@ -13,8 +13,8 @@ export const SDK_TO_MAIN_APP_COLORS_MAPPING: Record<MetabaseColor, ColorName> =
     "text-tertiary": "text-light",
     background: "bg-white",
     "background-hover": "bg-light",
+    shadow: "shadow",
 
-    // shadow: "shadow",
     // positive: "success",
     // negative: "danger",
     // warning: "warning",

enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.ts

@@ -10,7 +10,10 @@ import type {
 import type { EmbeddingThemeOverride } from "../../types/theme/private";
 
 import { colorTuple } from "./color-tuple";
-import { DEFAULT_EMBEDDED_COMPONENT_THEME } from "./default-component-theme";
+import {
+  DEFAULT_EMBEDDED_COMPONENT_THEME,
+  EMBEDDING_SDK_COMPONENTS_OVERRIDES,
+} from "./default-component-theme";
 import { SDK_TO_MAIN_APP_COLORS_MAPPING } from "./embedding-color-palette";
 
 const getFontFamily = (theme: MetabaseTheme) =>
@@ -37,6 +40,8 @@ export function getEmbeddingThemeOverride(
       ...components,
       ...(theme.fontSize && { fontSize: theme.fontSize }),
     },
+
+    components: EMBEDDING_SDK_COMPONENTS_OVERRIDES,
   };
 
   if (theme.colors) {

enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.unit.spec.ts

-import { DEFAULT_EMBEDDED_COMPONENT_THEME } from "embedding-sdk/lib/theme/default-component-theme";
+import {
+  DEFAULT_EMBEDDED_COMPONENT_THEME,
+  EMBEDDING_SDK_COMPONENTS_OVERRIDES,
+} from "embedding-sdk/lib/theme/default-component-theme";
 
 import { getEmbeddingThemeOverride } from "./get-embedding-theme";
 
@@ -27,6 +30,7 @@ describe("Transform Embedding Theme Override", () => {
         fontSize: "2rem",
         ...DEFAULT_EMBEDDED_COMPONENT_THEME,
       },
+      components: EMBEDDING_SDK_COMPONENTS_OVERRIDES,
     });
   });
 });

enterprise/frontend/src/embedding-sdk/types/theme/index.ts

@@ -45,6 +45,9 @@ export interface MetabaseColors {
   /** Color used for borders */
   border?: string;
 
+  /** Color used for popover shadows */
+  shadow?: string;
+
   /** Color used for filters context */
   filter?: string;
 

frontend/src/metabase/components/Breadcrumbs/Breadcrumbs.module.css

 :root {
-  --breadcrumbs-color: var(--color-text-light);
+  --breadcrumbs-color: var(--mb-color-text-light);
   --breadcrumb-page-color: var(--mb-color-text-dark);
   --breadcrumb-divider-spacing: 0.75em;
 
   /* taken from Sidebar.css, should probably factor them out into variables */
-  --sidebar-breadcrumbs-color: var(--color-text-medium);
+  --sidebar-breadcrumbs-color: var(--mb-color-text-medium);
 }
 
 .breadcrumbs {

frontend/src/metabase/components/Calendar/Calendar.module.css

@@ -27,7 +27,7 @@
 }
 
 .CalendarDay {
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
   position: relative;
   border-radius: 99px;
   font-weight: 700;

frontend/src/metabase/components/List/List.module.css

 :root {
   --title-color: var(--mb-color-text-dark);
-  --subtitle-color: var(--color-text-medium);
-  --muted-color: var(--color-text-light);
+  --subtitle-color: var(--mb-color-text-medium);
+  --muted-color: var(--mb-color-text-light);
 }
 
 .list {

frontend/src/metabase/components/MetadataInfo/ColumnInfo/ColumnInfo.unit.spec.js

 import { setupFieldsValuesEndpoints } from "__support__/server-mocks";
 import { createMockEntitiesState } from "__support__/store";
-import { render, renderWithProviders, screen } from "__support__/ui";
+import { renderWithProviders, screen } from "__support__/ui";
 import { getMetadata } from "metabase/selectors/metadata";
 import * as Lib from "metabase-lib";
 import { createQuery, columnFinder } from "metabase-lib/test-helpers";
@@ -34,7 +34,9 @@ function setupMLv2(table, column) {
   const findColumn = columnFinder(query, columns);
   const col = findColumn(table, column);
 
-  return render(<QueryColumnInfo query={query} stageIndex={-1} column={col} />);
+  return renderWithProviders(
+    <QueryColumnInfo query={query} stageIndex={-1} column={col} />,
+  );
 }
 
 describe("FieldInfo", () => {

frontend/src/metabase/components/MetadataInfo/MetadataInfo.styled.tsx

@@ -38,7 +38,7 @@ export const Description = styled.div`
 `;
 
 export const EmptyDescription = styled(Description)`
-  color: ${color("text-light")};
+  color: ${({ theme }) => theme.fn.themeColor("text-light")};
   font-weight: 700;
 `;
 

frontend/src/metabase/components/Sidebar.module.css

@@ -4,7 +4,7 @@
   width: 30%;
   max-width: 500px;
   background-color: var(--color-bg-light);
-  color: var(--color-text-medium);
+  color: var(--mb-color-text-medium);
 }
 
 .sidebar a {
@@ -16,7 +16,7 @@
   align-items: center;
   display: flex;
   font-size: 1em;
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
 }
 
 .item .icon {
@@ -39,7 +39,7 @@
 
 .name {
   composes: ml2 textBold from "style";
-  color: var(--color-text-medium);
+  color: var(--mb-color-text-medium);
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow-x: hidden;

frontend/src/metabase/css/admin.module.css

@@ -66,7 +66,7 @@
   bottom: 0;
   margin: auto;
   margin-left: 1em;
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
 }
 
 .AdminListSearch .AdminInput {
@@ -105,7 +105,7 @@
   margin-top: 1em;
   padding: 0.5em 1em 0.5em 1em;
   text-transform: uppercase;
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
   font-weight: 700;
   font-size: smaller;
   padding-right: 15px; /* set so that table visibility icons align */
@@ -157,7 +157,7 @@
 
 .AdminTable th {
   text-transform: uppercase;
-  color: var(--color-text-medium);
+  color: var(--mb-color-text-medium);
   padding: var(--padding-1);
   font-weight: normal;
 }

frontend/src/metabase/css/components/buttons.module.css

@@ -97,12 +97,12 @@
 .ButtonBorderless {
   border-color: transparent;
   background: transparent;
-  color: var(--color-text-medium);
+  color: var(--mb-color-text-medium);
 }
 
 .ButtonBorderless:hover {
   border-color: transparent;
-  color: var(--color-text-medium);
+  color: var(--mb-color-text-medium);
 }
 
 .ButtonOnlyIcon {

frontend/src/metabase/css/components/form.module.css

 ::-webkit-input-placeholder {
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
 }
 
 :-moz-placeholder {
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
 }
 
 :-ms-input-placeholder {
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
 }
 
 .FormField {
   margin-bottom: 1.5em;
-  color: var(--color-text-medium);
+  color: var(--mb-color-text-medium);
 }
 
 .FormField.FormFieldError {

frontend/src/metabase/css/components/list.module.css

@@ -8,7 +8,7 @@
 }
 
 .ListItem :global(.Icon) {
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
 }
 
 .ListSectionHeader {
@@ -65,7 +65,7 @@
 }
 
 .ListItemDisabled .ListItemTitle {
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
 }
 
 .ListItemCursor:not(.ListItemDisabled) .ListItemTitle,
@@ -78,7 +78,7 @@
 .ListItemDescription {
   margin-top: 0.25em;
   margin-bottom: 0;
-  color: var(--color-text-medium);
+  color: var(--mb-color-text-medium);
 }
 
 .ListItemDisabled .ListItemDescription {

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

@@ -7,8 +7,8 @@
   --mb-color-summarize: #88bf4d;
   --color-error: #ed6e6e;
   --mb-color-text-dark: #4c5773;
-  --color-text-medium: #696e7b;
-  --color-text-light: #949aab;
+  --mb-color-text-medium: #696e7b;
+  --mb-color-text-light: #949aab;
   --color-text-white: #fff;
   --mb-color-bg-black: #2e353b;
   --color-bg-dark: #93a1ab;
@@ -47,20 +47,20 @@
 }
 
 .textSlate {
-  color: var(--color-text-medium);
+  color: var(--mb-color-text-medium);
 }
 
 .textSlateLight {
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
 }
 
 .textLight {
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
 }
 
 .textMedium,
 .textMediumHover:hover {
-  color: var(--color-text-medium);
+  color: var(--mb-color-text-medium);
 }
 
 .textDark,

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

@@ -38,7 +38,7 @@
 .textBody {
   font-size: 1.286em;
   line-height: 1.457em;
-  color: var(--color-text-medium); /* TODO - is this bad? */
+  color: var(--mb-color-text-medium); /* TODO - is this bad? */
 }
 
 .textList {
@@ -82,7 +82,7 @@
 
 .textCode {
   font-family: monospace;
-  color: var(--color-text-medium);
+  color: var(--mb-color-text-medium);
   background-color: var(--color-bg-medium);
   border-radius: 2px;
   padding: 0.2em 0.4em;

frontend/src/metabase/css/dashboard.module.css

@@ -64,7 +64,7 @@
 
 .PinMapUpdateButtonDisabled {
   pointer-events: none;
-  color: var(--color-text-light);
+  color: var(--mb-color-text-light);
 }
 
 /* .react-draggable*, .react-resizable* are 3rd party library classes */