From 82e95749fd07d94263dc71b8bdc6730615e3ae16 Mon Sep 17 00:00:00 2001
From: Uladzimir Havenchyk <125459446+uladzimirdev@users.noreply.github.com>
Date: Tue, 13 Aug 2024 12:47:07 +0300
Subject: [PATCH] fix: get correct values from theme to fill css variables
(#46740)
---
.../styled-components/theme/css-variables.ts | 8 +++----
.../theme/css-variables.unit.spec.ts | 23 +++++++++++++++++++
2 files changed, 26 insertions(+), 5 deletions(-)
create mode 100644 frontend/src/metabase/styled-components/theme/css-variables.unit.spec.ts
diff --git a/frontend/src/metabase/styled-components/theme/css-variables.ts b/frontend/src/metabase/styled-components/theme/css-variables.ts
index 99aadcae10e..438667482aa 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 00000000000..7b589c95a7f
--- /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;");
+ });
+});
--
GitLab