From 40d11066a9de5404baab74bb189fd1539e7c0377 Mon Sep 17 00:00:00 2001
From: Phoomparin Mano <poom@metabase.com>
Date: Fri, 7 Jun 2024 22:07:27 +0700
Subject: [PATCH] Customize dashboard, dashcard and question background color
for embedding SDK (#43618)
* dashcard background color
* add bg-dashboard and bg-dashboard-card
* rename background-visualization to background-question
* apply bg-question to embedded questions
* use CSS variables along with theme object
* add css variables to more places
* add ability to reference design system colors for defaults
* use CSS variables for defaults
* fix chart skeleton test
* fix legend item title
---
.storybook/preview-head.html | 7 +++++++
.../components/private/SdkContentWrapper.tsx | 16 ++++++++++++++++
.../InteractiveQuestion/InteractiveQuestion.tsx | 6 +++++-
.../public/StaticQuestion/StaticQuestion.tsx | 6 +++++-
.../lib/theme/default-component-theme.ts | 9 +++++++++
.../src/embedding-sdk/types/theme/index.ts | 12 ++++++++++++
.../components/DashCard/DashCard.styled.tsx | 2 +-
.../components/EmbedFrame/EmbedFrame.module.css | 4 ++--
.../containers/GlobalStyles/GlobalStyles.tsx | 7 +++++++
.../components/legend/LegendCaption.styled.tsx | 8 ++++----
.../components/legend/LegendItem.styled.tsx | 2 +-
11 files changed, 69 insertions(+), 10 deletions(-)
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 699bcdc2be3..27940e11057 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -15,5 +15,12 @@
--mb-color-brand-light: #f9fbfc;
--mb-color-brand-lighter: #eef6fc;
--mb-color-filter: #7172ad;
+
+ /*
+ 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);
}
</style>
diff --git a/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx b/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx
index 1f1904e503f..be893605724 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/private/SdkContentWrapper.tsx
@@ -60,6 +60,22 @@ const SdkContentWrapperInner = styled.div<
--mb-color-bg-medium: ${({ theme }) => theme.fn.themeColor("bg-medium")};
--mb-color-bg-night: ${() => color("bg-night")};
+ /**
+ Theming-specific CSS variables.
+ Keep in sync with [GlobalStyles.tsx] and [.storybook/preview-head.html].
+
+ Refer to DEFAULT_METABASE_COMPONENT_THEME for their defaults.
+
+ 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};
+
font-size: ${({ theme }) => theme.other.fontSize};
${aceEditorStyles}
diff --git a/enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.tsx b/enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.tsx
index 49eb0f7e147..3dae5f4211b 100644
--- a/enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.tsx
@@ -112,7 +112,11 @@ export const _InteractiveQuestion = ({
}
return (
- <Box className={cx(CS.flexFull, CS.fullWidth)} h={height ?? defaultHeight}>
+ <Box
+ className={cx(CS.flexFull, CS.fullWidth)}
+ h={height ?? defaultHeight}
+ bg="var(--mb-color-bg-question)"
+ >
<Stack h="100%">
<Flex direction="row" gap="md" px="md" align="center">
{withTitle &&
diff --git a/enterprise/frontend/src/embedding-sdk/components/public/StaticQuestion/StaticQuestion.tsx b/enterprise/frontend/src/embedding-sdk/components/public/StaticQuestion/StaticQuestion.tsx
index d2abf56e364..53e19bbc4cf 100644
--- a/enterprise/frontend/src/embedding-sdk/components/public/StaticQuestion/StaticQuestion.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/public/StaticQuestion/StaticQuestion.tsx
@@ -120,7 +120,11 @@ const _StaticQuestion = ({
});
return (
- <Box className={cx(CS.flexFull, CS.fullWidth)} h={height ?? defaultHeight}>
+ <Box
+ className={cx(CS.flexFull, CS.fullWidth)}
+ h={height ?? defaultHeight}
+ bg="var(--mb-color-bg-question)"
+ >
<Group h="100%" pos="relative" align="flex-start">
{showVisualizationSelector && (
<Box w="355px">
diff --git a/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts b/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts
index 09a6b9f5d26..abcf1baa0fa 100644
--- a/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts
+++ b/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts
@@ -28,6 +28,15 @@ export const FONT_SIZES = {
* such as charts, data tables and popovers.
*/
export const DEFAULT_METABASE_COMPONENT_THEME: MetabaseComponentTheme = {
+ dashboard: {
+ backgroundColor: "var(--mb-color-bg-white)",
+ card: {
+ backgroundColor: "var(--mb-color-bg-white)",
+ },
+ },
+ question: {
+ backgroundColor: "transparent",
+ },
table: {
cell: {
fontSize: FONT_SIZES.tableCell.px,
diff --git a/enterprise/frontend/src/embedding-sdk/types/theme/index.ts b/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
index 1a8531316c1..9c8863bcef3 100644
--- a/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
+++ b/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
@@ -79,6 +79,18 @@ export type MetabaseColor = keyof MetabaseColors;
* in DEFAULT_METABASE_COMPONENT_THEME at [default-component-theme.ts]
*/
export interface MetabaseComponentTheme {
+ dashboard: {
+ backgroundColor: string;
+
+ card: {
+ backgroundColor: string;
+ };
+ };
+
+ question: {
+ backgroundColor: string;
+ };
+
/** Data tables **/
table: {
cell: {
diff --git a/frontend/src/metabase/dashboard/components/DashCard/DashCard.styled.tsx b/frontend/src/metabase/dashboard/components/DashCard/DashCard.styled.tsx
index bed8453a7ed..3114bf3d1aa 100644
--- a/frontend/src/metabase/dashboard/components/DashCard/DashCard.styled.tsx
+++ b/frontend/src/metabase/dashboard/components/DashCard/DashCard.styled.tsx
@@ -31,7 +31,7 @@ const hiddenBackgroundStyle = css`
`;
export const DashCardRoot = styled.div<DashCardRootProps>`
- background-color: ${color("white")};
+ background-color: var(--mb-color-bg-dashboard-card);
${({ isNightMode }) => isNightMode && rootNightModeStyle}
${({ isUsuallySlow }) => isUsuallySlow && rootSlowCardStyle}
diff --git a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.module.css b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.module.css
index 5293fdb200d..016d4807227 100644
--- a/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.module.css
+++ b/frontend/src/metabase/public/components/EmbedFrame/EmbedFrame.module.css
@@ -3,13 +3,13 @@ body {
}
.EmbedFrame {
- background-color: white;
+ background-color: var(--mb-color-bg-dashboard);
}
.EmbedFrameHeader,
.EmbedFrameFooter {
color: var(--mb-color-text-dark);
- background-color: white;
+ background-color: var(--mb-color-bg-dashboard);
}
.ThemeNight.EmbedFrame {
diff --git a/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx b/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
index 415bead1bc5..3f945e92606 100644
--- a/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
+++ b/frontend/src/metabase/styled-components/containers/GlobalStyles/GlobalStyles.tsx
@@ -36,6 +36,13 @@ export const GlobalStyles = (): JSX.Element => {
--mb-color-error: ${color("error")};
--mb-color-filter: ${color("filter")};
--mb-color-shadow: ${color("shadow")};
+
+ /*
+ 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);
}
${defaultFontFiles({ baseUrl: sitePath })}
diff --git a/frontend/src/metabase/visualizations/components/legend/LegendCaption.styled.tsx b/frontend/src/metabase/visualizations/components/legend/LegendCaption.styled.tsx
index a0f0660dfa3..a146155c792 100644
--- a/frontend/src/metabase/visualizations/components/legend/LegendCaption.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/legend/LegendCaption.styled.tsx
@@ -1,6 +1,6 @@
import styled from "@emotion/styled";
-import { color, lighten } from "metabase/lib/colors";
+import { lighten } from "metabase/lib/colors";
import { Icon } from "metabase/ui";
export const LegendCaptionRoot = styled.div`
@@ -10,7 +10,7 @@ export const LegendCaptionRoot = styled.div`
`;
export const LegendLabel = styled.div`
- color: ${color("text-dark")};
+ color: var(--mb-color-text-dark);
font-weight: bold;
cursor: ${({ onClick }) => (onClick ? "pointer" : "")};
overflow: hidden;
@@ -26,11 +26,11 @@ export const LegendLabelIcon = styled(Icon)`
`;
export const LegendDescriptionIcon = styled(Icon)`
- color: ${lighten("text-light", 0.1)};
+ color: ${({ theme }) => lighten(theme.fn?.themeColor("text-light"), 0.1)};
margin: 0 0.375rem;
&:hover {
- color: ${color("text-medium")};
+ color: var(--mb-color-text-medium);
}
`;
diff --git a/frontend/src/metabase/visualizations/components/legend/LegendItem.styled.tsx b/frontend/src/metabase/visualizations/components/legend/LegendItem.styled.tsx
index af7518b31c4..b3530352850 100644
--- a/frontend/src/metabase/visualizations/components/legend/LegendItem.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/legend/LegendItem.styled.tsx
@@ -38,7 +38,7 @@ export const LegendItemDot = styled.div`
`;
export const LegendItemTitle = styled.div`
- color: ${color("text-dark")};
+ color: var(--mb-color-text-dark);
font-weight: bold;
font-size: 12px;
margin-left: 4px;
--
GitLab