Customize dashboard, dashcard and question background color for embedding SDK (#43618)

* dashcard background color

* add bg-dashboard and bg-dashboard-card

* rename background-visualization to background-question

* apply bg-question to embedded questions

* use CSS variables along with theme object

* add css variables to more places

* add ability to reference design system colors for defaults

* use CSS variables for defaults

* fix chart skeleton test

* fix legend item title

.storybook/preview-head.html

@@ -15,5 +15,12 @@
     --mb-color-brand-light: #f9fbfc;
     --mb-color-brand-lighter: #eef6fc;
     --mb-color-filter: #7172ad;
+
+    /*
+      Theming-specific CSS variables.
+      These CSS variables are not part of the core design system colors.
+    **/
+    --mb-color-bg-dashboard: var(--mb-color-bg-white);
+    --mb-color-bg-dashboard-card: var(--mb-color-bg-white);
   }
 </style>

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

@@ -60,6 +60,22 @@ const SdkContentWrapperInner = styled.div<
   --mb-color-bg-medium: ${({ theme }) => theme.fn.themeColor("bg-medium")};
   --mb-color-bg-night: ${() => color("bg-night")};
 
+  /**
+    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].
+  */
+  --mb-color-bg-dashboard: ${({ theme }) =>
+    theme.other.dashboard.backgroundColor};
+  --mb-color-bg-dashboard-card: ${({ theme }) =>
+    theme.other.dashboard.card.backgroundColor};
+  --mb-color-bg-question: ${({ theme }) =>
+    theme.other.question.backgroundColor};
+
   font-size: ${({ theme }) => theme.other.fontSize};
 
   ${aceEditorStyles}

enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.tsx

@@ -112,7 +112,11 @@ export const _InteractiveQuestion = ({
   }
 
   return (
-    <Box className={cx(CS.flexFull, CS.fullWidth)} h={height ?? defaultHeight}>
+    <Box
+      className={cx(CS.flexFull, CS.fullWidth)}
+      h={height ?? defaultHeight}
+      bg="var(--mb-color-bg-question)"
+    >
       <Stack h="100%">
         <Flex direction="row" gap="md" px="md" align="center">
           {withTitle &&

enterprise/frontend/src/embedding-sdk/components/public/StaticQuestion/StaticQuestion.tsx

@@ -120,7 +120,11 @@ const _StaticQuestion = ({
   });
 
   return (
-    <Box className={cx(CS.flexFull, CS.fullWidth)} h={height ?? defaultHeight}>
+    <Box
+      className={cx(CS.flexFull, CS.fullWidth)}
+      h={height ?? defaultHeight}
+      bg="var(--mb-color-bg-question)"
+    >
       <Group h="100%" pos="relative" align="flex-start">
         {showVisualizationSelector && (
           <Box w="355px">

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

@@ -28,6 +28,15 @@ export const FONT_SIZES = {
  * such as charts, data tables and popovers.
  */
 export const DEFAULT_METABASE_COMPONENT_THEME: MetabaseComponentTheme = {
+  dashboard: {
+    backgroundColor: "var(--mb-color-bg-white)",
+    card: {
+      backgroundColor: "var(--mb-color-bg-white)",
+    },
+  },
+  question: {
+    backgroundColor: "transparent",
+  },
   table: {
     cell: {
       fontSize: FONT_SIZES.tableCell.px,

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

@@ -79,6 +79,18 @@ export type MetabaseColor = keyof MetabaseColors;
  * in DEFAULT_METABASE_COMPONENT_THEME at [default-component-theme.ts]
  */
 export interface MetabaseComponentTheme {
+  dashboard: {
+    backgroundColor: string;
+
+    card: {
+      backgroundColor: string;
+    };
+  };
+
+  question: {
+    backgroundColor: string;
+  };
+
   /** Data tables **/
   table: {
     cell: {

frontend/src/metabase/dashboard/components/DashCard/DashCard.styled.tsx

@@ -31,7 +31,7 @@ const hiddenBackgroundStyle = css`
 `;
 
 export const DashCardRoot = styled.div<DashCardRootProps>`
-  background-color: ${color("white")};
+  background-color: var(--mb-color-bg-dashboard-card);
 
   ${({ isNightMode }) => isNightMode && rootNightModeStyle}
   ${({ isUsuallySlow }) => isUsuallySlow && rootSlowCardStyle}

frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.module.css

@@ -3,13 +3,13 @@ body {
 }
 
 .EmbedFrame {
-  background-color: white;
+  background-color: var(--mb-color-bg-dashboard);
 }
 
 .EmbedFrameHeader,
 .EmbedFrameFooter {
   color: var(--mb-color-text-dark);
-  background-color: white;
+  background-color: var(--mb-color-bg-dashboard);
 }
 
 .ThemeNight.EmbedFrame {

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

@@ -36,6 +36,13 @@ export const GlobalStyles = (): JSX.Element => {
       --mb-color-error: ${color("error")};
       --mb-color-filter: ${color("filter")};
       --mb-color-shadow: ${color("shadow")};
+
+      /*
+        Theming-specific CSS variables.
+        These CSS variables are not part of the core design system colors.
+      **/
+      --mb-color-bg-dashboard: var(--mb-color-bg-white);
+      --mb-color-bg-dashboard-card: var(--mb-color-bg-white);
     }
 
     ${defaultFontFiles({ baseUrl: sitePath })}

frontend/src/metabase/visualizations/components/legend/LegendCaption.styled.tsx

 import styled from "@emotion/styled";
 
-import { color, lighten } from "metabase/lib/colors";
+import { lighten } from "metabase/lib/colors";
 import { Icon } from "metabase/ui";
 
 export const LegendCaptionRoot = styled.div`
@@ -10,7 +10,7 @@ export const LegendCaptionRoot = styled.div`
 `;
 
 export const LegendLabel = styled.div`
-  color: ${color("text-dark")};
+  color: var(--mb-color-text-dark);
   font-weight: bold;
   cursor: ${({ onClick }) => (onClick ? "pointer" : "")};
   overflow: hidden;
@@ -26,11 +26,11 @@ export const LegendLabelIcon = styled(Icon)`
 `;
 
 export const LegendDescriptionIcon = styled(Icon)`
-  color: ${lighten("text-light", 0.1)};
+  color: ${({ theme }) => lighten(theme.fn?.themeColor("text-light"), 0.1)};
   margin: 0 0.375rem;
 
   &:hover {
-    color: ${color("text-medium")};
+    color: var(--mb-color-text-medium);
   }
 `;
 

frontend/src/metabase/visualizations/components/legend/LegendItem.styled.tsx

@@ -38,7 +38,7 @@ export const LegendItemDot = styled.div`
 `;
 
 export const LegendItemTitle = styled.div`
-  color: ${color("text-dark")};
+  color: var(--mb-color-text-dark);
   font-weight: bold;
   font-size: 12px;
   margin-left: 4px;