fix(sdk): Add theming to collection browser breadcrumbs (#44066)

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

@@ -453,6 +453,17 @@ const theme = {
         backgroundColor: "#95A5A6",
       },
     },
+    
+    collectionBrowser: {
+       breadcrumbs: {
+         expandButton: {
+           textColor: "#8118F4";
+           backgroundColor: "#767D7C";
+           hoverTextColor: "#CE8C8C";
+           hoverBackgroundColor: "#69264B";
+         };
+       };
+     };
   },
 };
 ```

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

@@ -8,21 +8,25 @@ import { alpha, color, lighten } from "metabase/lib/colors";
 import { useSelector } from "metabase/lib/redux";
 import { aceEditorStyles } from "metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled";
 import { getFontFiles } from "metabase/styled-components/selectors";
+import { useThemeSpecificSelectors } from "metabase/styled-components/theme/theme";
 import { saveDomImageStyles } from "metabase/visualizations/lib/save-chart-image";
 import type { FontFile } from "metabase-types/api";
 
 interface SdkContentWrapperProps {
   baseUrl?: string;
 }
+
 export function SdkContentWrapper({
   baseUrl,
   ...divProps
 }: SdkContentWrapperProps & HTMLAttributes<HTMLDivElement>) {
   const fontFiles = useSelector(getFontFiles);
+  const themeSpecificSelectors = useThemeSpecificSelectors();
   return (
     <SdkContentWrapperInner
       baseUrl={baseUrl}
       fontFiles={fontFiles}
+      themeSpecificSelectors={themeSpecificSelectors}
       {...divProps}
     />
   );
@@ -31,6 +35,7 @@ export function SdkContentWrapper({
 const SdkContentWrapperInner = styled.div<
   SdkContentWrapperProps & {
     fontFiles: FontFile[] | null;
+    themeSpecificSelectors: string;
   }
 >`
   --mb-default-font-family: "${({ theme }) => theme.fontFamily}";
@@ -73,12 +78,7 @@ const SdkContentWrapperInner = styled.div<
     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};
+  ${({ themeSpecificSelectors }) => themeSpecificSelectors}
 
   font-size: ${({ theme }) => theme.other.fontSize};
 

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

@@ -2,6 +2,7 @@ import { merge } from "icepick";
 
 import type { MetabaseComponentTheme } from "embedding-sdk";
 import { EMBEDDING_SDK_ROOT_ELEMENT_ID } from "embedding-sdk/config";
+import type { DeepPartial } from "embedding-sdk/types/utils";
 import type { MantineThemeOverride } from "metabase/ui";
 
 export const DEFAULT_SDK_FONT_SIZE = 14;
@@ -28,6 +29,16 @@ export const FONT_SIZES = {
  * such as charts, data tables and popovers.
  */
 export const DEFAULT_METABASE_COMPONENT_THEME: MetabaseComponentTheme = {
+  collectionBrowser: {
+    breadcrumbs: {
+      expandButton: {
+        textColor: "var(--mb-color-text-medium)",
+        backgroundColor: "var(--mb-color-bg-light)",
+        hoverTextColor: "var(--mb-color-text-white)",
+        hoverBackgroundColor: "var(--mb-color-brand)",
+      },
+    },
+  },
   dashboard: {
     backgroundColor: "var(--mb-color-bg-white)",
     card: {
@@ -64,23 +75,32 @@ export const DEFAULT_METABASE_COMPONENT_THEME: MetabaseComponentTheme = {
  * Default theme options, with overrides specific to the
  * Embedding SDK environment to provide nicer defaults.
  */
-export const DEFAULT_EMBEDDED_COMPONENT_THEME: MetabaseComponentTheme = merge(
-  DEFAULT_METABASE_COMPONENT_THEME,
-  {
-    table: {
-      cell: {
-        fontSize: FONT_SIZES.tableCell.em,
-        backgroundColor: "bg-white",
-      },
+export const DEFAULT_EMBEDDED_COMPONENT_THEME: MetabaseComponentTheme = merge<
+  MetabaseComponentTheme,
+  DeepPartial<MetabaseComponentTheme>
+>(DEFAULT_METABASE_COMPONENT_THEME, {
+  table: {
+    cell: {
+      fontSize: FONT_SIZES.tableCell.em,
+      backgroundColor: "bg-white",
     },
-    cartesian: {
-      label: { fontSize: FONT_SIZES.label.em },
-      goalLine: {
-        label: { fontSize: FONT_SIZES.goalLabel.em },
+  },
+  cartesian: {
+    label: { fontSize: FONT_SIZES.label.em },
+    goalLine: {
+      label: { fontSize: FONT_SIZES.goalLabel.em },
+    },
+  },
+  collectionBrowser: {
+    breadcrumbs: {
+      expandButton: {
+        backgroundColor: "transparent",
+        hoverTextColor: "var(--mb-color-text-white)",
+        hoverBackgroundColor: "var(--mb-color-brand)",
       },
     },
   },
-);
+});
 
 export const EMBEDDING_SDK_COMPONENTS_OVERRIDES: MantineThemeOverride["components"] =
   {

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

+import type { ColorName } from "metabase/lib/colors/types";
+
 import type { MetabaseFontFamily } from "../fonts";
 import type { DeepPartial } from "../utils";
 
@@ -78,7 +80,7 @@ export type MetabaseColor = keyof MetabaseColors;
  * Every non-optional properties here must have a default value defined
  * in DEFAULT_METABASE_COMPONENT_THEME at [default-component-theme.ts]
  */
-export interface MetabaseComponentTheme {
+export type MetabaseComponentTheme = {
   dashboard: {
     backgroundColor: string;
 
@@ -152,7 +154,20 @@ export interface MetabaseComponentTheme {
       };
     };
   };
-}
+
+  collectionBrowser: {
+    breadcrumbs: {
+      expandButton: {
+        backgroundColor: ColorCssVariableOrString;
+        hoverBackgroundColor: ColorCssVariableOrString;
+        textColor: ColorCssVariableOrString;
+        hoverTextColor: ColorCssVariableOrString;
+      };
+    };
+  };
+};
+
+type ColorCssVariableOrString = `var(--mb-color-${ColorName})` | string;
 
 export type ChartColor =
   | string

frontend/src/metabase/nav/components/CollectionBreadcrumbs/CollectionBreadcrumbs.styled.tsx

@@ -8,7 +8,7 @@ export const PathContainer = styled.div`
   min-width: 0;
 `;
 
-export const PathSeparator = styled.div`
+export const BreadcrumbsPathSeparator = styled.div`
   display: flex;
   align-items: center;
   color: var(--mb-color-text-light);
@@ -23,12 +23,12 @@ export const ExpandButton = styled(Button)`
   border: none;
   margin: 0;
   padding: 0.25rem;
-  background-color: var(--mb-color-bg-light);
+  background-color: var(--mb-color-bg-collection-browser-expand-button);
   border-radius: 2px;
-  color: var(--mb-color-text-medium);
+  color: var(--mb-color-text-collection-browser-expand-button);
 
   &:hover {
-    color: var(--mb-color-text-white);
-    background-color: var(--mb-color-brand);
+    color: var(--mb-color-text-collection-browser-expand-button-hover);
+    background-color: var(--mb-color-bg-collection-browser-expand-button-hover);
   }
 `;

frontend/src/metabase/nav/components/CollectionBreadcrumbs/CollectionBreadcrumbs.tsx

@@ -11,7 +11,7 @@ import type {
 import {
   ExpandButton,
   PathContainer,
-  PathSeparator,
+  BreadcrumbsPathSeparator,
 } from "./CollectionBreadcrumbs.styled";
 import { getCollectionList } from "./utils";
 
@@ -37,6 +37,8 @@ export const CollectionBreadcrumbs = ({
     collection,
   });
 
+  const separator = <BreadcrumbsPathSeparator>/</BreadcrumbsPathSeparator>;
+
   const content =
     parts.length > 1 && !isExpanded ? (
       <>
@@ -45,7 +47,7 @@ export const CollectionBreadcrumbs = ({
           isSingleLine
           onClick={onClick ? () => onClick(collection) : undefined}
         />
-        <PathSeparator>/</PathSeparator>
+        {separator}
         <ExpandButton
           small
           borderless
@@ -53,7 +55,7 @@ export const CollectionBreadcrumbs = ({
           onlyIcon
           onClick={toggle}
         />
-        <PathSeparator>/</PathSeparator>
+        {separator}
       </>
     ) : (
       parts.map(collection => (
@@ -63,7 +65,7 @@ export const CollectionBreadcrumbs = ({
             isSingleLine
             onClick={onClick ? () => onClick(collection) : undefined}
           />
-          <PathSeparator>/</PathSeparator>
+          {separator}
         </Fragment>
       ))
     );

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

@@ -6,6 +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 { saveDomImageStyles } from "metabase/visualizations/lib/save-chart-image";
 
 import { getFont, getFontFiles } from "../../selectors";
@@ -14,6 +15,8 @@ export const GlobalStyles = (): JSX.Element => {
   const font = useSelector(getFont);
   const fontFiles = useSelector(getFontFiles);
 
+  const themeSpecificSelectors = useThemeSpecificSelectors();
+
   const sitePath = getSitePath();
 
   const styles = css`
@@ -43,12 +46,7 @@ export const GlobalStyles = (): JSX.Element => {
       --mb-color-text-white: ${color("text-white")};
       --mb-color-warning: ${color("warning")};
 
-      /*
-        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);
+      ${themeSpecificSelectors}
     }
 
     ${defaultFontFiles({ baseUrl: sitePath })}

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

+import { get } from "lodash";
+
+import type { MetabaseComponentTheme } from "embedding-sdk";
+import { useMantineTheme } from "metabase/ui";
+
+// https://www.raygesualdo.com/posts/flattening-object-keys-with-typescript-types/
+type FlattenObjectKeys<
+  T extends Record<string, unknown>,
+  Key = keyof T,
+> = Key extends string
+  ? T[Key] extends Record<string, unknown>
+    ? `${Key}.${FlattenObjectKeys<T[Key]>}`
+    : `${Key}`
+  : never;
+
+type MetabaseComponentThemeKey = FlattenObjectKeys<MetabaseComponentTheme>;
+
+/*
+  Theming-specific CSS variables.
+  These CSS variables are not part of the core design system colors.
+**/
+export const useThemeSpecificSelectors = () => {
+  const theme = useMantineTheme();
+
+  //  get value from theme.other, which is typed as MetabaseComponentTheme
+  const getValue = (key: MetabaseComponentThemeKey) => get(theme.other, key);
+
+  return `
+    --mb-color-bg-dashboard: ${getValue("dashboard.backgroundColor")};
+    --mb-color-bg-dashboard-card: ${getValue("dashboard.card.backgroundColor")};
+    --mb-color-bg-question: ${getValue("question.backgroundColor")};
+
+    --mb-color-text-collection-browser-expand-button: ${getValue(
+      "collectionBrowser.breadcrumbs.expandButton.textColor",
+    )};
+    --mb-color-bg-collection-browser-expand-button: ${getValue(
+      "collectionBrowser.breadcrumbs.expandButton.backgroundColor",
+    )};
+    --mb-color-text-collection-browser-expand-button-hover: ${getValue(
+      "collectionBrowser.breadcrumbs.expandButton.hoverTextColor",
+    )};
+    --mb-color-bg-collection-browser-expand-button-hover: ${getValue(
+      "collectionBrowser.breadcrumbs.expandButton.hoverBackgroundColor",
+    )};
+    
+  `;
+};