fix: get correct values from theme to fill css variables (#46740)

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

 import { css } from "@emotion/react";
-import { get } from "underscore";
+import { getIn } from "icepick";
 
 import type { MetabaseComponentTheme } from "embedding-sdk";
 import { SDK_TO_MAIN_APP_COLORS_MAPPING } from "embedding-sdk/lib/theme/embedding-color-palette";
@@ -96,10 +96,8 @@ function getSdkDesignSystemCssVariables(theme: MantineTheme) {
  **/
 export function getThemeSpecificCssVariables(theme: MantineTheme) {
   // Get value from theme.other, which is typed as MetabaseComponentTheme
-  const getValue = (key: MetabaseComponentThemeKey) => {
-    const value = get(theme.other, key);
-
-    return value as string | undefined;
+  const getValue = (key: MetabaseComponentThemeKey): string | undefined => {
+    return getIn(theme.other, key.split("."));
   };
 
   return css`

frontend/src/metabase/styled-components/theme/css-variables.unit.spec.ts

+import type { MantineTheme } from "metabase/ui";
+
+import { getThemeSpecificCssVariables } from "./css-variables";
+
+describe("getThemeSpecificCssVariables", () => {
+  it("returns the correct CSS variables", () => {
+    const theme = {
+      other: {
+        dashboard: {
+          backgroundColor: "red",
+          card: {
+            backgroundColor: "purple",
+          },
+        },
+      },
+    } as MantineTheme;
+
+    const styles = getThemeSpecificCssVariables(theme).styles;
+
+    expect(styles).toContain("--mb-color-bg-dashboard:red;");
+    expect(styles).toContain("--mb-color-bg-dashboard-card:purple;");
+  });
+});