Repository: apache/superset
File: superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx (TypeScript)

Code before:
}) {
  if (alignPositiveNegative) {
    return 0;
  }
  const [minValue, maxValue] = valueRange;
  const posExtent = Math.abs(Math.max(maxValue, 0));
  const negExtent = Math.abs(Math.min(minValue, 0));
  const tot = posExtent + negExtent;
  return Math.round((Math.min(negExtent + value, negExtent) / tot) * 100);
}

/**
 * Cell background color calculation for horizontal bar chart
 */
function cellBackground({
  value,
  colorPositiveNegative = false,
  theme,
}: {
  value: number;
  colorPositiveNegative: boolean;
  theme: SupersetTheme;
}) {
  if (!colorPositiveNegative) {
    const color = isThemeDark(theme)
      ? 'rgba(255,255,255,0.3)'
      : 'rgba(0,0,0,0.2)';
    return color;
  }

  const color = isThemeDark(theme)
    ? value < 0
      ? `rgba(255,100,100,0.4)`
      : `rgba(255,255,255,0.3)`
    : `rgba(${value < 0 ? 150 : 0},0,0,0.2)`;
  return color;
}

function SortIcon<D extends object>({ column }: { column: ColumnInstance<D> }) {
  const { isSorted, isSortedDesc } = column;
  let sortIcon = <FaSort />;
  if (isSorted) {
    sortIcon = isSortedDesc ? <FaSortDesc /> : <FaSortAsc />;
  }
  return sortIcon;
}

function SearchInput({
  count,
  value,
  onChange,

Review comment (suggestion):
Do not check for isThemeDark ... Directly use this 

function cellBackground({
  value,
  colorPositiveNegative = false,
  theme,
}: {
  value: number;
  colorPositiveNegative: boolean;
  theme: SupersetTheme;
}) {
  if (!colorPositiveNegative) {
    const fillColor = theme.colorFillSecondary; 
    const { r, g, b } = tinycolor(fillColor).toRgb();
    return `rgba(${r},${g},${b},0.2)`; 
  }

  if (value < 0) {
    const errorColor = theme.colorError; // Use the main error color (red) instead of bg
    const { r, g, b } = tinycolor(errorColor).toRgb();
    return `rgba(${r},${g},${b},0.2)`; 
  }

  const successColor = theme.colorSuccess; // Use proper green success color
  const { r, g, b } = tinycolor(successColor).toRgb();
  return `rgba(${r},${g},${b},0.2)`;
}

it is better to rely on theming tokens directly


Code after:
  if (alignPositiveNegative) {
    return 0;
  }
  const [minValue, maxValue] = valueRange;
  const posExtent = Math.abs(Math.max(maxValue, 0));
  const negExtent = Math.abs(Math.min(minValue, 0));
  const tot = posExtent + negExtent;
  return Math.round((Math.min(negExtent + value, negExtent) / tot) * 100);
}

/**
 * Cell background color calculation for horizontal bar chart
 */
function cellBackground({
  value,
  colorPositiveNegative = false,
  theme,
}: {
  value: number;
  colorPositiveNegative: boolean;
  theme: SupersetTheme;
}) {
  if (!colorPositiveNegative) {
    return `${theme.colorFillSecondary}50`;
  }

  if (value < 0) {
    return `${theme.colorError}50`;
  }

  return `${theme.colorSuccess}50`;
}

function SortIcon<D extends object>({ column }: { column: ColumnInstance<D> }) {
  const { isSorted, isSortedDesc } = column;
  let sortIcon = <FaSort />;
  if (isSorted) {
    sortIcon = isSortedDesc ? <FaSortDesc /> : <FaSortAsc />;
  }
  return sortIcon;
}

function SearchInput({
  count,
  value,
  onChange,
  onBlur,
  inputRef,
}: SearchInputProps) {
  return (
    <Space direction="horizontal" size={4} className="dt-global-filter">