From de400f699867a434d745ffdfdfb93ac7079aa3cf Mon Sep 17 00:00:00 2001
From: github-automation-metabase
<166700802+github-automation-metabase@users.noreply.github.com>
Date: Thu, 14 Nov 2024 03:19:48 -0500
Subject: [PATCH] feat(sdk): add background-disabled color (#49900) (#50009)
* add background-disabled color
* expect background-disabled to be mapped in tests
Co-authored-by: Phoomparin Mano <poom@metabase.com>
---
docs/embedding/sdk/appearance.md | 3 +++
.../embedding-sdk/lib/theme/embedding-color-palette.ts | 8 +-------
.../lib/theme/get-embedding-theme.unit.spec.ts | 2 ++
.../frontend/src/embedding-sdk/types/theme/index.ts | 3 +++
4 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/docs/embedding/sdk/appearance.md b/docs/embedding/sdk/appearance.md
index ff0069412c9..fcb2f3add33 100644
--- a/docs/embedding/sdk/appearance.md
+++ b/docs/embedding/sdk/appearance.md
@@ -49,6 +49,9 @@ const theme = defineEmbeddingSdkTheme({
// Slightly darker background color used for hover and accented elements
"background-hover": "#F9FBFC",
+ // Muted background color used for disabled elements, such as disabled buttons and inputs.
+ "background-disabled": "#F3F5F7",
+
// Color used for borders
border: "#EEECEC",
diff --git a/enterprise/frontend/src/embedding-sdk/lib/theme/embedding-color-palette.ts b/enterprise/frontend/src/embedding-sdk/lib/theme/embedding-color-palette.ts
index ed382d86a0d..266d26cc1c7 100644
--- a/enterprise/frontend/src/embedding-sdk/lib/theme/embedding-color-palette.ts
+++ b/enterprise/frontend/src/embedding-sdk/lib/theme/embedding-color-palette.ts
@@ -43,16 +43,10 @@ export const SDK_TO_MAIN_APP_COLORS_MAPPING: Record<
"text-tertiary": ["text-light", "text-tertiary"],
background: ["bg-white", "background"],
"background-hover": ["bg-light"],
+ "background-disabled": ["background-disabled"],
shadow: ["shadow"],
positive: ["success"],
negative: ["danger"],
-
- // positive: "success",
- // negative: "danger",
- // warning: "warning",
-
- // white
- // black
};
const originalColors = { ...colors };
diff --git a/enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.unit.spec.ts b/enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.unit.spec.ts
index 99dd7361798..68c43084d2d 100644
--- a/enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.unit.spec.ts
+++ b/enterprise/frontend/src/embedding-sdk/lib/theme/get-embedding-theme.unit.spec.ts
@@ -16,6 +16,7 @@ describe("Transform Embedding Theme Override", () => {
brand: "hotpink",
"text-primary": "yellow",
"text-tertiary": "green",
+ "background-disabled": "pink",
},
},
"Roboto",
@@ -30,6 +31,7 @@ describe("Transform Embedding Theme Override", () => {
"text-primary": expect.arrayContaining(["yellow"]),
"text-light": expect.arrayContaining(["green"]),
"text-tertiary": expect.arrayContaining(["green"]),
+ "background-disabled": expect.arrayContaining(["pink"]),
},
other: {
fontSize: "2rem",
diff --git a/enterprise/frontend/src/embedding-sdk/types/theme/index.ts b/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
index 26e84d44357..a8eb4ac9538 100644
--- a/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
+++ b/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
@@ -51,6 +51,9 @@ export interface MetabaseColors {
/** Slightly darker background color used for hover and accented elements. */
"background-hover"?: string;
+ /** Muted background color used for disabled elements, such as disabled buttons and inputs. */
+ "background-disabled"?: string;
+
/** Color used for borders */
border?: string;
--
GitLab