diff --git a/frontend/src/metabase/styled-components/theme/css-variables.ts b/frontend/src/metabase/styled-components/theme/css-variables.ts index 99aadcae10ef08c31d9b43e9c49da70101584ad7..438667482aa614960162b435cdfc3cba3a4a5c41 100644 --- a/frontend/src/metabase/styled-components/theme/css-variables.ts +++ b/frontend/src/metabase/styled-components/theme/css-variables.ts @@ -1,5 +1,5 @@ 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` diff --git a/frontend/src/metabase/styled-components/theme/css-variables.unit.spec.ts b/frontend/src/metabase/styled-components/theme/css-variables.unit.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..7b589c95a7f20503cc55bec9ddfba2e0121cefe6 --- /dev/null +++ b/frontend/src/metabase/styled-components/theme/css-variables.unit.spec.ts @@ -0,0 +1,23 @@ +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;"); + }); +});