feat(sdk): add background-disabled color (#49900)

* add background-disabled color

* expect background-disabled to be mapped in tests

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",
 

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 };

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",

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;