fix(table): improve conditional formatting text contrast (#38705)

superset-frontend/plugins/plugin-chart-ag-grid-table/src/styles/index.tsx

@@ -309,6 +309,17 @@ export const StyledChartContainer = styled.div<{
       height: auto;
     }
 
+    .ag-cell {
+      color: var(--ag-cell-value-color, inherit);
+    }
+
+    .ag-row-hover .ag-cell {
+      color: var(
+        --ag-cell-value-hover-color,
+        var(--ag-cell-value-color, inherit)
+      );
+    }
+
     .ag-container {
       border-radius: 0px;
       border: var(--ag-wrapper-border);

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/getCellStyle.ts

@@ -17,7 +17,11 @@
  * under the License.
  */
 
-import { ColorFormatters } from '@superset-ui/chart-controls';
+import {
+  ColorFormatters,
+  getTextColorForBackground,
+  ObjectFormattingEnum,
+} from '@superset-ui/chart-controls';
 import { CellClassParams } from '@superset-ui/core/components/ThemedAgGridReact';
 import { BasicColorFormatterType, InputColumn } from '../types';
 
@@ -29,6 +33,8 @@ type CellStyleParams = CellClassParams & {
     [Key: string]: BasicColorFormatterType;
   }[];
   col: InputColumn;
+  cellSurfaceColor: string;
+  hoverCellSurfaceColor: string;
 };
 
 const getCellStyle = (params: CellStyleParams) => {
@@ -42,8 +48,11 @@ const getCellStyle = (params: CellStyleParams) => {
     columnColorFormatters,
     col,
     node,
+    cellSurfaceColor,
+    hoverCellSurfaceColor,
   } = params;
   let backgroundColor;
+  let color;
   if (hasColumnColorFormatters) {
     columnColorFormatters!
       .filter(formatter => {
@@ -56,7 +65,16 @@ const getCellStyle = (params: CellStyleParams) => {
         const formatterResult =
           value || value === 0 ? formatter.getColorFromValue(value) : false;
         if (formatterResult) {
-          backgroundColor = formatterResult;
+          if (
+            formatter.objectFormatting === ObjectFormattingEnum.TEXT_COLOR ||
+            formatter.toTextColor
+          ) {
+            color = formatterResult;
+          } else if (
+            formatter.objectFormatting !== ObjectFormattingEnum.CELL_BAR
+          ) {
+            backgroundColor = formatterResult;
+          }
         }
       });
   }
@@ -72,9 +90,20 @@ const getCellStyle = (params: CellStyleParams) => {
 
   const textAlign =
     col?.config?.horizontalAlign || (col?.isNumeric ? 'right' : 'left');
+  const resolvedTextColor = getTextColorForBackground(
+    { backgroundColor, color },
+    cellSurfaceColor,
+  );
+  const hoverResolvedTextColor = getTextColorForBackground(
+    { backgroundColor, color },
+    hoverCellSurfaceColor,
+  );
 
   return {
     backgroundColor: backgroundColor || '',
+    color: '',
+    '--ag-cell-value-color': resolvedTextColor || '',
+    '--ag-cell-value-hover-color': hoverResolvedTextColor || '',
     textAlign,
   };
 };

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/useColDefs.ts

@@ -21,6 +21,7 @@ import { ColDef } from '@superset-ui/core/components/ThemedAgGridReact';
 import { useCallback, useMemo } from 'react';
 import { DataRecord, DataRecordValue } from '@superset-ui/core';
 import { GenericDataType } from '@apache-superset/core/common';
+import { useTheme } from '@apache-superset/core/theme';
 import { ColorFormatters } from '@superset-ui/chart-controls';
 import { extent as d3Extent, max as d3Max } from 'd3-array';
 import {
@@ -225,6 +226,7 @@ export const useColDefs = ({
   alignPositiveNegative,
   slice_id,
 }: UseColDefsProps) => {
+  const theme = useTheme();
   const getCommonColProps = useCallback(
     (
       col: InputColumn,
@@ -280,15 +282,30 @@ export const useColDefs = ({
         headerName: getHeaderLabel(col),
         valueFormatter: p => valueFormatter(p, col),
         valueGetter: p => valueGetter(p, col),
-        cellStyle: p =>
-          getCellStyle({
+        cellStyle: p => {
+          const cellSurfaceColor =
+            p.node?.rowPinned != null
+              ? theme.colorBgBase
+              : p.rowIndex % 2 === 0
+                ? theme.colorBgBase
+                : theme.colorFillQuaternary;
+          const hoverCellSurfaceColor =
+            p.node?.rowPinned != null
+              ? cellSurfaceColor
+              : theme.colorFillSecondary;
+          const cellStyleParams = {
             ...p,
             hasColumnColorFormatters,
             columnColorFormatters,
             hasBasicColorFormatters,
             basicColorFormatters,
             col,
-          }),
+            cellSurfaceColor,
+            hoverCellSurfaceColor,
+          } as Parameters<typeof getCellStyle>[0];
+
+          return getCellStyle(cellStyleParams);
+        },
         cellClass: p =>
           getCellClass({
             ...p,
@@ -385,6 +402,9 @@ export const useColDefs = ({
       allowRearrangeColumns,
       serverPagination,
       alignPositiveNegative,
+      theme.colorBgBase,
+      theme.colorFillSecondary,
+      theme.colorFillQuaternary,
     ],
   );