Add custom theming support for SDK InteractiveQuestion component (#42663)

* Add proper brand colors to drills menu

* Add theming for filters and drills

* Fix css vars

* Fix table css

* Add SDK theme colors interface and remapping

* Fix dashboard brand color issue

* Fix theme colors interface

* Fix default theme table cell background

* Fix typo

* Fix for qb filters panel custom border

frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.module.css

@@ -10,7 +10,7 @@ button.horizontalButton {
   width: auto;
   min-width: 148px;
   line-height: 1rem;
-  color: var(--color-text-dark);
+  color: var(--mb-color-text-dark);
 
   &:hover {
     color: var(--color-white);

frontend/src/metabase/visualizations/components/ClickActions/ClickActionControl.styled.tsx

 import styled from "@emotion/styled";
 
 import Button from "metabase/core/components/Button";
-import { alpha, color } from "metabase/lib/colors";
+import { alpha } from "metabase/lib/colors";
 import { Icon, rem } from "metabase/ui";
 
 export const ClickActionButtonIcon = styled(Icon)`
   margin-right: 0.2rem;
-  color: ${color("brand")};
+  color: ${({ theme }) => theme.fn.themeColor("brand")};
   transition: all 200ms linear;
 `;
 
@@ -16,49 +16,49 @@ export const ClickActionButtonTextIcon = styled.span`
   text-align: center;
   font-weight: 700;
   font-size: 1.25rem;
-  color: ${color("brand")};
+  color: ${({ theme }) => theme.fn.themeColor("brand")};
   transition: all 200ms linear;
 `;
 
 export const Subtitle = styled.div`
-  color: ${color("text-light")};
+  color: ${({ theme }) => theme.fn.themeColor("text-light")};
   font-weight: normal;
   margin-left: 1rem;
 `;
 
 export const TokenFilterActionButton = styled(Button)`
-  color: ${color("brand")};
+  color: ${({ theme }) => theme.fn.themeColor("brand")};
   font-size: 1.25rem;
   line-height: 1rem;
   padding: 0.125rem 0.85rem 0.25rem;
-  border: 1px solid ${color("focus")};
+  border: 1px solid ${({ theme }) => theme.fn.themeColor("focus")};
   border-radius: 100px;
 
   &:hover {
-    color: ${color("white")};
-    background-color: ${color("brand")};
-    border-color: ${color("brand")};
+    color: ${({ theme }) => theme.fn.themeColor("white")};
+    background-color: ${({ theme }) => theme.fn.themeColor("brand")};
+    border-color: ${({ theme }) => theme.fn.themeColor("brand")};
   }
 `;
 
 export const TokenActionButton = styled(Button)`
-  color: ${color("brand")};
+  color: ${({ theme }) => theme.fn.themeColor("brand")};
   font-size: 0.875em;
   line-height: 1rem;
   padding: 0.3125rem 0.875rem;
-  border: 1px solid ${alpha("brand", 0.35)};
+  border: 1px solid ${({ theme }) => alpha(theme.fn.themeColor("brand"), 0.35)};
   border-radius: 100px;
 
   &:hover {
-    color: ${color("white")};
-    background-color: ${color("brand")};
-    border-color: ${color("brand")};
+    color: ${({ theme }) => theme.fn.themeColor("white")};
+    background-color: ${({ theme }) => theme.fn.themeColor("brand")};
+    border-color: ${({ theme }) => theme.fn.themeColor("brand")};
   }
 `;
 
 export const SortControl = styled(Button)`
-  color: ${color("brand")};
-  border: 1px solid ${alpha("brand", 0.35)};
+  color: ${({ theme }) => theme.fn.themeColor("brand")};
+  border: 1px solid ${({ theme }) => alpha(theme.fn.themeColor("brand"), 0.35)};
   line-height: 1;
 
   font-size: 0.75rem;
@@ -67,14 +67,14 @@ export const SortControl = styled(Button)`
   border-radius: 100px;
 
   &:hover {
-    color: ${color("white")};
-    background-color: ${color("brand")};
-    border-color: ${color("brand")};
+    color: ${({ theme }) => theme.fn.themeColor("white")};
+    background-color: ${({ theme }) => theme.fn.themeColor("brand")};
+    border-color: ${({ theme }) => theme.fn.themeColor("brand")};
   }
 `;
 
 export const FormattingControl = styled(Button)`
-  color: ${alpha("text-light", 0.65)};
+  color: ${({ theme }) => alpha(theme.fn.themeColor("text-light"), 0.65)};
   margin-left: auto;
   line-height: 1;
 
@@ -82,13 +82,13 @@ export const FormattingControl = styled(Button)`
   padding: 0.125rem 0.25rem;
 
   &:hover {
-    color: ${color("brand")};
+    color: ${({ theme }) => theme.fn.themeColor("brand")};
     background-color: transparent;
   }
 `;
 
 export const InfoControl = styled.div`
-  color: ${color("text-dark")};
+  color: ${({ theme }) => theme.fn.themeColor("text-dark")};
   font-weight: bold;
   line-height: 1.5rem;
   max-width: 10.75rem;

frontend/src/metabase/visualizations/components/ClickActions/ClickActionsPopover.styled.tsx

 import styled from "@emotion/styled";
 
 import TippyPopover from "metabase/components/Popover/TippyPopover";
-import { color } from "metabase/lib/colors";
 
 export const Container = styled.div`
   display: flex;
@@ -22,6 +21,6 @@ export const FlexTippyPopover = styled(TippyPopover)`
 `;
 export const Divider = styled.div`
   height: 1px;
-  background-color: ${color("border")};
+  background-color: ${({ theme }) => theme.fn.themeColor("border")};
   margin: 0.5rem -1.5rem 0.5rem;
 `;

frontend/src/metabase/visualizations/components/ClickActions/ClickActionsViewSection.styled.tsx

 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-import { color } from "metabase/lib/colors";
-
 import type { ContentDirectionType } from "./utils";
 
 export const Section = styled.div<{
@@ -49,5 +47,5 @@ export const SectionTitle = styled.p`
   margin: 0;
 
   font-size: 0.875em;
-  color: ${color("text-medium")};
+  color: ${({ theme }) => theme.fn.themeColor("text-medium")};
 `;

frontend/src/metabase/visualizations/components/TableInteractive/TableInteractive.module.css

@@ -23,7 +23,7 @@
 
 .TableInteractiveHeader {
   box-sizing: border-box;
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--mb-color-border);
 }
 
 .TableInteractive .TableInteractiveCellWrapper {
@@ -33,19 +33,19 @@
   border-top: 1px solid transparent;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
-  border-bottom: 1px solid color-mod(var(--color-border) alpha(-70%));
+  border-bottom: 1px solid color-mod(var(--mb-color-border) alpha(-70%));
 }
 
 .TableInteractive .TableInteractiveHeader,
 .TableInteractive .TableInteractiveHeader .TableInteractiveCellWrapper,
 .TableInteractive .TableInteractiveHeader .TableInteractiveCellWrapper:hover {
-  background-color: var(--color-bg-white);
+  background-color: var(--mb-color-bg-white);
   background-image: none;
 }
 
 .TableInteractive .TableInteractiveHeader,
 .TableInteractive .TableInteractiveHeader .TableInteractiveCellWrapper {
-  background-color: var(--color-bg-white);
+  background-color: var(--mb-color-bg-white);
 }
 
 /* cell overflow ellipsis */
@@ -62,7 +62,7 @@
 /* pivot */
 .TableInteractive.TableInteractivePivot
   .TableInteractiveCellWrapperFirstColumn {
-  border-right: 1px solid var(--color-border);
+  border-right: 1px solid var(--mb-color-border);
 }
 
 .TableInteractive
@@ -100,10 +100,10 @@
   top: 0;
   right: 0;
   z-index: 50;
-  background: white;
+  background: var(--mb-color-bg-white);
   padding: 0 0.5em;
   box-sizing: border-box;
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--mb-color-border);
   display: flex;
   align-items: center;
 }

frontend/src/metabase/visualizations/visualizations/PieChart/PieChart.module.css

@@ -21,7 +21,7 @@
 }
 
 .Value {
-  color: var(--color-text-dark);
+  color: var(--mb-color-text-dark);
   font-size: 22px;
   font-weight: bolder;
 }

postcss.config.js

+/* eslint-env node */
 /* eslint-disable import/no-commonjs */
 const glob = require("glob");
 
@@ -5,6 +6,8 @@ const glob = require("glob");
 const SRC_PATH = __dirname + "/frontend/src/metabase";
 const CSS_SRC = glob.sync(SRC_PATH + "/css/**/*.css");
 
+const IS_SDK_BUILD = process.env.IS_SDK_BUILD === "true";
+
 module.exports = {
   plugins: {
     "postcss-import": {},
@@ -14,9 +17,11 @@ module.exports = {
       importFrom: CSS_SRC,
       features: {
         "custom-media-queries": true,
-        "custom-properties": {
-          preserve: false,
-        },
+        "custom-properties": IS_SDK_BUILD
+          ? true
+          : {
+              preserve: false,
+            },
         "color-mod-function": true,
         "focus-visible-pseudo-class": false,
       },

webpack.embedding-sdk.config.js

@@ -11,6 +11,8 @@ const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 const mainConfig = require("./webpack.config");
 const { resolve } = require("path");
 
+process.env.IS_SDK_BUILD = "true";
+
 const SDK_SRC_PATH = __dirname + "/enterprise/frontend/src/embedding-sdk";
 const BUILD_PATH = __dirname + "/resources/embedding-sdk";
 const ENTERPRISE_SRC_PATH =