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

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