add background-inverse color mapping

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

@@ -45,6 +45,7 @@ const darkTheme = defineEmbeddingSdkTheme({
     "background-secondary": colors.darkGrey,
     "background-hover": colors.background,
     "background-disabled": colors.darkGrey,
+    "background-inverse": colors.background,
     charts: [
       colors.primary,
       colors.filter,

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

@@ -49,6 +49,7 @@ export const SDK_TO_MAIN_APP_COLORS_MAPPING: Record<
   "background-hover": ["bg-light"],
   "background-secondary": ["bg-medium"],
   "background-disabled": ["background-disabled"],
+  "background-inverse": ["bg-black", "background-inverse"],
   shadow: ["shadow"],
   positive: ["success"],
   negative: ["danger"],

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

@@ -63,6 +63,9 @@ export interface MetabaseColors {
   /** Muted background color used for disabled elements, such as disabled buttons and inputs. */
   "background-disabled"?: string;
 
+  /** Inverted background color used for elements e.g. tooltip backgrounds. */
+  "background-inverse"?: string;
+
   /** Color used for borders */
   border?: string;