fix(sdk): font size, color and padding in viz (#44283)

* funnel start color should be text-dark

* change pivot table font size unit to em for scaling

* change funnel and legend item unit to em

* change funnel font size to em

* change object detail font size to em

* change gauge font size to em

* add cartesian chart padding config

* update docs

* remove isEmbeddingSdk prop

* simulate the 0.875em base font size

* chart padding override should apply in query builder

* add cartesian padding to stories

* update readme docs

* fix collection browser option in readme docs

* fix pivot table font size scaling

* update loki

* update loki

* use em for smart scalar

* update chart default padding

* revert smart scalar font size scaling due to measurement

* dynamic font family and font size as defaults

* pivot table

* add more properties to sdk docs

* make FONT_SIZES constant local

* link to discussion on query builder extra spacing

* enforce that font is passed to getLeftHeaderWidths

enterprise/frontend/src/embedding-sdk/README.md

@@ -466,6 +466,9 @@ const theme = {
 
         // Default background color of cells, defaults to `background`
         backgroundColor: "#FFFFFF",
+
+        // Font size of cell values, defaults to ~12.5px
+        fontSize: "12.5px",
       },
 
       idColumn: {
@@ -486,8 +489,20 @@ const theme = {
       },
     },
 
+    // Cartesian chart
+    cartesian: {
+      // Padding around the cartesian charts.
+      // Uses CSS's `padding` property format.
+      padding: "4px 8px",
+    },
+
     // Pivot table
     pivotTable: {
+      cell: {
+        // Font size of cell values, defaults to ~12px
+        fontSize: "12px",
+      },
+
       // Pivot row toggle to expand or collapse row
       rowToggle: {
         textColor: "#FFFFFF",
@@ -498,13 +513,13 @@ const theme = {
     collectionBrowser: {
        breadcrumbs: {
          expandButton: {
-           textColor: "#8118F4";
-           backgroundColor: "#767D7C";
-           hoverTextColor: "#CE8C8C";
-           hoverBackgroundColor: "#69264B";
-         };
-       };
-     };
+           textColor: "#8118F4",
+           backgroundColor: "#767D7C",
+           hoverTextColor: "#CE8C8C",
+           hoverBackgroundColor: "#69264B",
+         },
+       },
+     },
   },
 };
 ```

enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts

@@ -14,8 +14,9 @@ const units = (px: number) => ({
   em: `${px / DEFAULT_SDK_FONT_SIZE}em`,
 });
 
-export const FONT_SIZES = {
+const FONT_SIZES = {
   tableCell: units(12.5),
+  pivotTableCell: units(12),
   label: units(12),
   goalLabel: units(14),
 };
@@ -70,6 +71,9 @@ export const DEFAULT_METABASE_COMPONENT_THEME: MetabaseComponentTheme = {
     },
   },
   pivotTable: {
+    cell: {
+      fontSize: FONT_SIZES.pivotTableCell.px,
+    },
     rowToggle: {
       textColor: "text-white",
       backgroundColor: "text-light", // TODO: should it be "bg-dark" ?
@@ -97,7 +101,13 @@ export const DEFAULT_EMBEDDED_COMPONENT_THEME: MetabaseComponentTheme = merge<
       backgroundColor: "bg-white",
     },
   },
+  pivotTable: {
+    cell: {
+      fontSize: FONT_SIZES.pivotTableCell.em,
+    },
+  },
   cartesian: {
+    padding: "0.5rem 1rem",
     label: { fontSize: FONT_SIZES.label.em },
     goalLine: {
       label: { fontSize: FONT_SIZES.goalLabel.em },

enterprise/frontend/src/embedding-sdk/types/theme/index.ts

@@ -126,6 +126,11 @@ export type MetabaseComponentTheme = {
 
   /** Pivot table **/
   pivotTable: {
+    cell: {
+      /** Font size of cell values, defaults to ~12px */
+      fontSize: string;
+    };
+
     /** Button to toggle pivot table rows */
     rowToggle: {
       textColor: string;
@@ -144,6 +149,9 @@ export type MetabaseComponentTheme = {
 
   /** Cartesian charts */
   cartesian: {
+    /** Padding around the chart. */
+    padding?: string;
+
     label: {
       /** Labels used in cartesian charts, such as axis ticks and series. */
       fontSize: string;

frontend/src/metabase/visualizations/components/FunnelNormal.styled.tsx

@@ -37,7 +37,7 @@ export const Head = styled.div<SharedProps>`
   ${props =>
     props.isNarrow
       ? css`
-          font-size: 12px;
+          font-size: 0.85em;
         `
       : null}
 `;
@@ -45,7 +45,7 @@ export const Head = styled.div<SharedProps>`
 export const Info = styled.div<SharedProps>`
   text-align: right;
   padding: 0.5em 0.5em 0 0.5em;
-  font-size: ${props => (props.isNarrow ? "12px" : "16px")};
+  font-size: ${props => (props.isNarrow ? "0.85em" : "1.15em")};
 
   ${Subtitle} {
     font-size: ${props => (props.isNarrow ? "0.875em" : "0.6875em")};
@@ -61,11 +61,11 @@ export const FunnelStart = styled.div<SharedProps>`
   flex-grow: 1;
 
   padding-right: 0.5em;
-  font-size: 24px;
+  font-size: 1.72em;
 
   ${Title} {
     font-weight: bold;
-    color: black;
+    color: var(--mb-color-text-dark);
     ${props =>
       props.isNarrow
         ? css`

frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetailBody.styled.tsx

 import styled from "@emotion/styled";
 
 export const ObjectDetailBodyWrapper = styled.div`
-  font-size: 1rem;
+  font-size: 1.15em;
   flex: 1;
   overflow-y: auto;
 `;

frontend/src/metabase/visualizations/components/legend/LegendItem.styled.tsx

@@ -39,7 +39,7 @@ export const LegendItemDot = styled.div`
 export const LegendItemTitle = styled.div`
   color: var(--mb-color-text-dark);
   font-weight: bold;
-  font-size: 12px;
+  font-size: 0.85em;
   margin-left: 4px;
   overflow: hidden;
 `;

frontend/src/metabase/visualizations/visualizations/BarChart/BarChart.stories.tsx

@@ -47,7 +47,10 @@ export const Default: Story = () => (
 
 // Example of how themes can be applied in the SDK.
 export const EmbeddingHugeFont: Story = () => {
-  const theme: MetabaseTheme = { fontSize: "20px" };
+  const theme: MetabaseTheme = {
+    fontSize: "20px",
+    components: { cartesian: { padding: "0.5rem 1rem" } },
+  };
 
   return (
     <SdkVisualizationWrapper theme={theme}>

frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.styled.tsx

@@ -3,23 +3,10 @@ import styled from "@emotion/styled";
 import { ResponsiveEChartsRenderer } from "metabase/visualizations/components/EChartsRenderer";
 import LegendLayout from "metabase/visualizations/components/legend/LegendLayout";
 
+import { getChartPadding } from "./padding";
+
 type CartesianChartRootProps = {
   isQueryBuilder?: boolean;
-  isEmbeddingSdk?: boolean;
-};
-
-const getChartPadding = ({
-  isEmbeddingSdk,
-  isQueryBuilder,
-}: CartesianChartRootProps) => {
-  if (isEmbeddingSdk) {
-    return "0rem";
-  }
-  if (isQueryBuilder) {
-    return "1rem 1rem 1rem 2rem";
-  }
-
-  return "0.5rem 1rem";
 };
 
 export const CartesianChartRoot = styled.div<CartesianChartRootProps>`

frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.tsx

@@ -33,7 +33,6 @@ function _CartesianChart(props: VisualizationProps) {
     headerIcon,
     actionButtons,
     isQueryBuilder,
-    isEmbeddingSdk,
     isFullscreen,
     hovered,
     onChangeCardAndRun,
@@ -90,10 +89,7 @@ function _CartesianChart(props: VisualizationProps) {
   const canSelectTitle = !!onChangeCardAndRun;
 
   return (
-    <CartesianChartRoot
-      isQueryBuilder={isQueryBuilder}
-      isEmbeddingSdk={isEmbeddingSdk}
-    >
+    <CartesianChartRoot isQueryBuilder={isQueryBuilder}>
       {hasTitle && (
         <LegendCaption
           title={title}

frontend/src/metabase/visualizations/visualizations/CartesianChart/padding.ts

+import type { MantineTheme } from "metabase/ui";
+
+export const getChartPadding = ({
+  theme,
+  isQueryBuilder,
+}: {
+  isQueryBuilder?: boolean;
+  theme: MantineTheme;
+}) => {
+  const { padding } = theme.other.cartesian;
+
+  if (padding) {
+    return padding;
+  }
+
+  // Extra spacing is required on question pages.
+  // Refer to https://github.com/metabase/metabase/pull/17552#issuecomment-904945088
+  if (isQueryBuilder) {
+    return "1rem 1rem 1rem 2rem";
+  }
+
+  return "0.5rem 1rem";
+};

frontend/src/metabase/visualizations/visualizations/Gauge/Gauge.jsx

@@ -41,7 +41,7 @@ const getArrowFillColor = () => color("text-medium");
 const getArrowStrokeColor = () => color("bg-white");
 
 // in ems, but within the scaled 100px SVG element
-const FONT_SIZE_SEGMENT_LABEL = 0.25;
+const FONT_SIZE_SEGMENT_LABEL = 0.285;
 const FONT_SIZE_CENTER_LABEL_MIN = 0.5;
 const FONT_SIZE_CENTER_LABEL_MAX = 0.7;
 
@@ -420,8 +420,8 @@ const GaugeSegmentLabel = ({ position: [x, y], style = {}, children }) => (
     x={x}
     y={y}
     style={{
-      fill: color("text-medium"),
-      fontSize: `${FONT_SIZE_SEGMENT_LABEL}rem`,
+      fill: "var(--mb-color-text-medium)",
+      fontSize: `${FONT_SIZE_SEGMENT_LABEL}em`,
       textAnchor: Math.abs(x) < 5 ? "middle" : x > 0 ? "start" : "end",
       // shift text in the lower half down a bit
       transform:

frontend/src/metabase/visualizations/visualizations/LineChart/LineChart.stories.tsx

@@ -54,7 +54,10 @@ export const Default: Story = () => (
 );
 
 export const EmbeddingHugeFont: Story = () => {
-  const theme: MetabaseTheme = { fontSize: "20px" };
+  const theme: MetabaseTheme = {
+    fontSize: "20px",
+    components: { cartesian: { padding: "0.5rem 1rem" } },
+  };
 
   return (
     <SdkVisualizationWrapper theme={theme}>

frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx

@@ -4,11 +4,7 @@ import styled from "@emotion/styled";
 import { color, alpha, adjustBrightness } from "metabase/lib/colors";
 import type { MantineTheme } from "metabase/ui";
 
-import {
-  CELL_HEIGHT,
-  PIVOT_TABLE_FONT_SIZE,
-  RESIZE_HANDLE_WIDTH,
-} from "./constants";
+import { CELL_HEIGHT, RESIZE_HANDLE_WIDTH } from "./constants";
 
 export const RowToggleIconRoot = styled.div`
   display: flex;
@@ -158,7 +154,7 @@ interface PivotTableRootProps {
 
 export const PivotTableRoot = styled.div<PivotTableRootProps>`
   height: 100%;
-  font-size: ${PIVOT_TABLE_FONT_SIZE};
+  font-size: ${({ theme }) => theme.other.pivotTable.cell.fontSize};
 
   ${props =>
     props.isDashboard

frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx

@@ -18,6 +18,7 @@ import {
 } from "metabase/lib/data_grid";
 import { getScrollBarSize } from "metabase/lib/dom";
 import { getSetting } from "metabase/selectors/settings";
+import { useMantineTheme } from "metabase/ui";
 import {
   getDefaultSize,
   getMinSize,
@@ -85,6 +86,8 @@ function PivotTable({
   const [gridElement, setGridElement] = useState<HTMLElement | null>(null);
   const columnWidthSettings = settings["pivot_table.column_widths"];
 
+  const theme = useMantineTheme();
+
   const [
     { leftHeaderWidths, totalLeftHeaderWidths, valueHeaderWidths },
     setHeaderWidths,
@@ -198,6 +201,8 @@ function PivotTable({
     }
   }
 
+  const { fontSize } = theme.other.pivotTable.cell;
+
   useEffect(() => {
     if (!pivoted?.rowIndexes) {
       setHeaderWidths({
@@ -213,7 +218,7 @@ function PivotTable({
         rowIndexes: pivoted?.rowIndexes,
         getColumnTitle: idx => getColumnTitle(idx),
         leftHeaderItems: pivoted?.leftHeaderItems,
-        fontFamily: fontFamily,
+        font: { fontFamily, fontSize },
       });
 
       setHeaderWidths({ ...newLeftHeaderWidths, valueHeaderWidths });
@@ -230,6 +235,7 @@ function PivotTable({
     valueHeaderWidths,
     pivoted,
     fontFamily,
+    fontSize,
     getColumnTitle,
     columnsChanged,
     setHeaderWidths,

frontend/src/metabase/visualizations/visualizations/PivotTable/constants.ts

@@ -2,9 +2,6 @@
 export const DEFAULT_CELL_WIDTH = 100;
 export const CELL_HEIGHT = 30;
 
-// styling and cell text measurement depend on this font size
-export const PIVOT_TABLE_FONT_SIZE = "0.75rem";
-
 // values for computing header width
 export const ROW_TOGGLE_ICON_WIDTH = 24;
 export const CELL_PADDING = 16;