@automattic/charts 4.6.0 → 4.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.6.0",
+	"version": "4.8.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

package/src/charts/area-chart/area-chart.tsx

@@ -12,7 +12,7 @@ import {
 	useCallback,
 } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -509,7 +509,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 
 											{ withTooltips && (
 												<>
-													<AccessibleTooltip
+													<XYChartTooltip
 														detectBounds
 														snapTooltipToDatumX
 														// Stacked mode: yAccessor returns raw value, not stacked y — snapping mispositions.

package/src/charts/area-chart/test/area-chart.test.tsx

@@ -817,7 +817,7 @@ describe( 'AreaChart', () => {
 	} );
 
 	describe( 'Hover glyphs', () => {
-		// Trigger the AccessibleTooltip's keyboard nav so a tooltip is opened
+		// Trigger the XYChartTooltip's keyboard nav so a tooltip is opened
 		// against a known datum index, which is the only reliable way to
 		// surface the visx TooltipContext state in a jsdom environment.
 		const focusFirstDatum = async () => {

package/src/charts/area-chart/test/tooltip-resolution-branches.test.tsx

@@ -19,7 +19,7 @@ type CapturedRenderTooltip = ( params: RenderTooltipParams< DataPointDate > ) =>
 let capturedRenderTooltip: CapturedRenderTooltip | undefined;
 jest.mock( '../../../components/tooltip', () => ( {
 	...jest.requireActual( '../../../components/tooltip' ),
-	AccessibleTooltip: ( props: { renderTooltip?: CapturedRenderTooltip } ) => {
+	XYChartTooltip: ( props: { renderTooltip?: CapturedRenderTooltip } ) => {
 		capturedRenderTooltip = props.renderTooltip;
 		return null;
 	},

package/src/charts/bar-chart/bar-chart.module.scss

@@ -4,6 +4,13 @@
 		overflow: visible;
 	}
 
+	// The CSS property, not the attribute: an SVG geometry attribute does
+	// not substitute var().
+	:global(.visx-bar),
+	:global(.bar-chart__comparison-bar) {
+		rx: var(--a8c-charts-border-radius-bar-chart);
+	}
+
 	// Keep the collapsed state in `from` and never on the element: a dropped
 	// animation then fails visible. `both`, not `forwards`, for backwards fill.
 	&--animated rect {

package/src/charts/bar-chart/bar-chart.tsx

@@ -4,7 +4,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useState, useRef, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -242,7 +242,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	);
 
 	// The keyboard-navigation index space and the highlight CSS both stride over primary
-	// bars only; the accessible tooltip must use the same list, or its datum diverges from
+	// bars only; `XYChartTooltip` must use the same list, or its datum diverges from
 	// the highlighted bar once a comparison series shifts the indices.
 	const primarySeries = useMemo(
 		() => primaryEntries.map( ( { series } ) => series ),
@@ -474,7 +474,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			// so a patterned shadow gets the same outline as its primary bar.
 			return `
 			.visx-bar[fill="url(#${ patternId })"],
-			.bar-chart__comparison-bars rect[fill="url(#${ patternId })"] {
+			.bar-chart__comparison-bar[fill="url(#${ patternId })"] {
 				stroke: ${ color };
 				stroke-width: 1;
 				}
@@ -767,23 +767,29 @@ const BarChartInternal: FC< BarChartProps > = ( {
 											<WholeNumberTicks { ...wholeNumberTicksProps }>
 												{ valueTicks => (
 													<>
-														<Axis
-															{ ...chartOptions.axis.x }
-															{ ...( horizontal && valueTicks ? { tickValues: valueTicks } : {} ) }
-														/>
-														<Axis
-															{ ...chartOptions.axis.y }
-															{ ...( ! horizontal && valueTicks
-																? { tickValues: valueTicks }
-																: {} ) }
-														/>
+														{ chartOptions.axis.x.display !== false && (
+															<Axis
+																{ ...chartOptions.axis.x }
+																{ ...( horizontal && valueTicks
+																	? { tickValues: valueTicks }
+																	: {} ) }
+															/>
+														) }
+														{ chartOptions.axis.y.display !== false && (
+															<Axis
+																{ ...chartOptions.axis.y }
+																{ ...( ! horizontal && valueTicks
+																	? { tickValues: valueTicks }
+																	: {} ) }
+															/>
+														) }
 													</>
 												) }
 											</WholeNumberTicks>
 										) }
 
 										{ withTooltips && (
-											<AccessibleTooltip
+											<XYChartTooltip
 												tooltipPlacement={ tooltipPlacement }
 												tooltipAnchorTop={ tooltipAnchorTop }
 												style={ tooltipStyle }

package/src/charts/bar-chart/private/comparison-bars.tsx

@@ -127,6 +127,7 @@ export const ComparisonBars: FC< {
 			rects.push(
 				<rect
 					key={ `${ index }-${ i }` }
+					className="bar-chart__comparison-bar"
 					data-testid={ `bar-chart-comparison-${ index }-${ i }` }
 					x={ rect.x }
 					y={ rect.y }

package/src/charts/bar-chart/test/bar-chart.test.tsx

@@ -806,6 +806,31 @@ describe( 'BarChart', () => {
 		);
 	} );
 
+	describe( 'Axis display', () => {
+		test.each( [
+			[ 'vertical', 'x', 'y' ],
+			[ 'vertical', 'y', 'x' ],
+			[ 'horizontal', 'x', 'y' ],
+			[ 'horizontal', 'y', 'x' ],
+		] )( 'skips a hidden axis (%s, hidden %s)', ( orientation, hidden, shown ) => {
+			renderWithTheme( {
+				orientation,
+				options: {
+					axis: {
+						[ hidden ]: { display: false, axisClassName: 'test-hidden-axis' },
+						[ shown ]: { axisClassName: 'test-shown-axis' },
+					},
+				},
+			} );
+			const chart = screen.getByRole( 'grid' );
+
+			// eslint-disable-next-line testing-library/no-node-access -- See the visx node constraint above.
+			expect( chart.querySelector( '.test-hidden-axis' ) ).toBeNull();
+			// eslint-disable-next-line testing-library/no-node-access -- See the visx node constraint above.
+			expect( chart.querySelector( '.test-shown-axis' ) ).not.toBeNull();
+		} );
+	} );
+
 	describe( 'Grid Visibility', () => {
 		test( 'renders with different grid visibility options', () => {
 			const { rerender } = renderWithTheme( { gridVisibility: 'x' } );

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -114,16 +114,6 @@
 	}
 }
 
-.tooltip-wrapper {
-	background: var(--a8c-charts-color-surface);
-
-	// Override .visx-tooltip inline styles.
-	border-radius: var(--wpds-border-radius-md) !important;
-	padding: var(--wpds-dimension-padding-md) !important;
-	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
-
-}
-
 .tooltip-title {
 	color: var(--a8c-charts-color-label);
 	font-size: var(--wpds-typography-font-size-sm);

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx

@@ -36,6 +36,7 @@ import type { FunnelStep, ConversionFunnelChartProps } from './types';
  * @param props.renderStepRate   - Custom render function for step rates
  * @param props.renderMainMetric - Custom render function for the entire main metric section
  * @param props.renderTooltip    - Custom render function for tooltip content
+ * @param props.tooltipStyle     - Inline styles merged over the tooltip box defaults
  * @return JSX element representing the conversion funnel chart
  */
 const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
@@ -52,6 +53,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	renderStepRate,
 	renderMainMetric,
 	renderTooltip,
+	tooltipStyle,
 } ) => {
 	const chartId = useChartId( providedChartId );
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
@@ -412,7 +414,6 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 								index: steps.findIndex( s => s.id === ( tooltipData as FunnelStep ).id ),
 								top: tooltipTop,
 								left: tooltipLeft,
-								className: styles[ 'tooltip-wrapper' ],
 							} )
 						: renderDefaultTooltip( tooltipData as FunnelStep );
 
@@ -423,9 +424,10 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 						<BoundedTooltip
 							top={ tooltipTop }
 							left={ tooltipLeft }
-							className={ clsx( standaloneScopeClass, styles[ 'tooltip-wrapper' ] ) }
+							className={ standaloneScopeClass }
+							style={ tooltipStyle }
 						>
-							{ tooltipContent }
+							<div role="tooltip">{ tooltipContent }</div>
 						</BoundedTooltip>
 					);
 				} )() }

package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx

@@ -427,10 +427,29 @@ describe( 'ConversionFunnelChart', () => {
 				index: 1,
 				top: expect.any( Number ),
 				left: expect.any( Number ),
-				className: 'tooltip-wrapper',
 			} );
 		} );
 
+		it( 'exposes the tooltip content with role="tooltip"', async () => {
+			const user = userEvent.setup();
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			await user.click( screen.getByRole( 'button', { name: /cart/i } ) );
+
+			expect( screen.getByRole( 'tooltip' ) ).toHaveTextContent( 'Cart' );
+		} );
+
+		it( 'merges tooltipStyle onto the tooltip box', async () => {
+			const user = userEvent.setup();
+			renderWithoutTheme(
+				<ConversionFunnelChart { ...defaultProps } tooltipStyle={ { background: 'purple' } } />
+			);
+
+			await user.click( screen.getByRole( 'button', { name: /cart/i } ) );
+
+			expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( { background: 'purple' } );
+		} );
+
 		it( 'disables tooltip when renderTooltip returns null', async () => {
 			const user = userEvent.setup();
 			const customRenderTooltip = jest.fn( () => null );

package/src/charts/conversion-funnel-chart/types.ts

@@ -50,6 +50,7 @@ export interface TooltipRenderProps {
 	index: number;
 	top: number;
 	left: number;
+	/** @deprecated The tooltip box draws the package surface; this is no longer set. */
 	className?: string;
 }
 
@@ -80,4 +81,6 @@ export interface ConversionFunnelChartProps extends Pick<
 	renderMainMetric?: ( props: MainMetricRenderProps ) => React.ReactNode;
 	/** Custom render function for tooltip content */
 	renderTooltip?: ( props: TooltipRenderProps ) => React.ReactNode;
+	/** Inline styles merged over the tooltip box defaults. */
+	tooltipStyle?: React.CSSProperties;
 }

package/src/charts/heatmap-chart/heatmap-chart.module.scss

@@ -3,6 +3,10 @@
 // module, so it needs no runtime cascade and never lands on the DOM.
 $focus-ring-width: var(--wpds-border-width-focus);
 
+// JS sets the ends (getHeatmapScale): 3:1 against background and empty cell at
+// the low end. Unresolved, the floor is 15% of the primary.
+$heatmap-fill: color-mix(in sRGB, var(--a8c-charts-color-heatmap-high, var(--a8c-charts-color-heatmap-primary)) calc(var(--a8c-charts-heatmap-cell-intensity) * 100%), var(--a8c-charts-color-heatmap-low, color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) 15%, var(--a8c-charts-color-background, #fff))));
+
 .heatmap-chart {
 	position: relative;
 	// Keeps the tooltip's z-index inside the chart, as `.xy-plot` does.
@@ -165,10 +169,8 @@ $focus-ring-width: var(--wpds-border-width-focus);
 	margin-inline-end: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs));
 }
 
-// Floor the mix at 15% so the lowest value stays visibly tinted, distinct from
-// an empty cell.
 .heatmap-chart__cell--filled {
-	background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((0.15 + 0.85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-background, #fff));
+	background: $heatmap-fill;
 }
 
 .heatmap-chart__cell--selected {
@@ -183,12 +185,19 @@ $focus-ring-width: var(--wpds-border-width-focus);
 	font-size: var(--wpds-typography-font-size-md);
 }
 
-// Light text on fills dark enough to out-contrast dark text (decided in JS from
-// the blended fill luminance).
-.heatmap-chart__cell--strong .heatmap-chart__cell-value {
+// Chosen per cell in JS from the blended fill; see pickLabelTextColorForFill.
+.heatmap-chart__cell-value--inverse {
 	color: var(--a8c-charts-color-label-inverse);
 }
 
+.heatmap-chart__cell-value--black {
+	color: #000;
+}
+
+.heatmap-chart__cell-value--white {
+	color: #fff;
+}
+
 .heatmap-chart__legend-label {
 	color: var(--a8c-charts-color-label);
 }
@@ -197,7 +206,7 @@ $focus-ring-width: var(--wpds-border-width-focus);
 	width: var(--wpds-dimension-size-3xs);
 	height: var(--wpds-dimension-size-3xs);
 	border-radius: var(--a8c-charts-border-radius-cell);
-	background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((0.15 + 0.85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-background, #fff));
+	background: $heatmap-fill;
 }
 
 // One band: the steps butt against each other and only the band's ends round.

package/src/charts/heatmap-chart/heatmap-chart.tsx

@@ -1,10 +1,11 @@
 import { formatNumber, formatNumberCompact } from '@automattic/number-formatters';
-import { defaultStyles as visxTooltipStyles, useTooltip } from '@visx/tooltip';
+import { useTooltip } from '@visx/tooltip';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
+import isEqual from 'fast-deep-equal';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import tooltipStyles from '../../components/tooltip/base-tooltip.module.scss';
 import { BoundedTooltip, TOOLTIP_Z_INDEX } from '../../components/tooltip/private/bounded-tooltip';
+import { useIsomorphicLayoutEffect } from '../../hooks';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -12,27 +13,30 @@ import {
 	useGlobalChartsContext,
 	GlobalChartsContext,
 } from '../../providers';
-import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
+import {
+	BACKGROUND_FALLBACK,
+	CATALOG_POINTERS,
+} from '../../providers/chart-context/private/catalog-pointers';
+import { blendRgb, hexToRgb } from '../../providers/chart-context/private/perceptual-color';
+import { resolveOpaqueHex } from '../../providers/chart-context/private/resolve-opaque-hex';
 import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import { attachSubComponents } from '../../utils';
-import {
-	isValidHexColor,
-	mixHexColors,
-	normalizeColorToHex,
-	prefersLightText,
-} from '../../utils/color-utils';
-import { resolveCssVariable } from '../../utils/resolve-css-var';
+import { isValidHexColor, normalizeColorToHex } from '../../utils/color-utils';
+import { createCssVariableResolver } from '../../utils/resolve-css-var';
 import { Center } from '../private/center';
 import { useChartChildren } from '../private/chart-composition';
 import { ChartInstanceContext } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
+import { pickLabelTextColorForFill, resolveLabelRoles } from '../private/label-text-color';
 import { withResponsive } from '../private/with-responsive';
 import styles from './heatmap-chart.module.scss';
 import {
+	getHeatmapScale,
 	getValueExtent,
 	getNormalizedValue,
 	HeatmapContext,
 	HeatmapLegend,
+	isEmptyValue,
 	isPresent,
 	resolveColumnGroups,
 } from './private';
@@ -46,22 +50,23 @@ import {
 import type { HeatmapContextValue } from './private';
 import type { CellBlock, CellPosition } from './private/keyboard-navigation';
 import type { HeatmapChartProps, HeatmapTooltipData } from './types';
+import type { LabelRoles, LabelTextColor } from '../private/label-text-color';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { CSSProperties, FC } from 'react';
 
-// Mirrors the color-mix floor in heatmap-chart.module.scss (.heatmap-chart__cell--filled):
-// the rendered fill is the primary mixed over the chart background at 0.15 + 0.85 * intensity.
-const CELL_MIX_FLOOR = 0.15;
+// `label` is the stylesheet's default, so it needs no modifier.
+const CELL_VALUE_MODIFIER: Record< LabelTextColor, string | undefined > = {
+	label: undefined,
+	'label-inverse': styles[ 'heatmap-chart__cell-value--inverse' ],
+	black: styles[ 'heatmap-chart__cell-value--black' ],
+	white: styles[ 'heatmap-chart__cell-value--white' ],
+};
 
 // One instance, not a `[]` default in the signature: `buildTooltipData` keys on
 // it, and a fresh array per render re-ran the keyboard tooltip effect endlessly.
 const NO_ROW_LABELS: string[] = [];
 
-// The dark variant is painted by the `.surface` class, so its style carries no box.
-const TOOLTIP_BOX_STYLES: Record< 'light' | 'dark', CSSProperties > = {
-	light: { ...visxTooltipStyles, zIndex: TOOLTIP_Z_INDEX },
-	dark: { zIndex: TOOLTIP_Z_INDEX },
-};
+const TOOLTIP_BOX_STYLE: CSSProperties = { zIndex: TOOLTIP_Z_INDEX };
 
 // The cell's own label wins; otherwise the group, column and row labels name it.
 const cellName = ( info: HeatmapTooltipData ) =>
@@ -88,14 +93,13 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	gap = 'md',
 	withTooltips = false,
 	renderTooltip,
-	tooltipVariant = 'light',
 	tooltipStyle,
 	children,
 } ) => {
 	const chartId = useChartId( providedChartId );
 	const tooltipBoxStyle = tooltipStyle
-		? { ...TOOLTIP_BOX_STYLES[ tooltipVariant ], ...tooltipStyle }
-		: TOOLTIP_BOX_STYLES[ tooltipVariant ];
+		? { ...TOOLTIP_BOX_STYLE, ...tooltipStyle }
+		: TOOLTIP_BOX_STYLE;
 	const { getElementStyles, theme } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
@@ -106,6 +110,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		useTooltip< HeatmapTooltipData >();
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const containerRef = useRef< HTMLDivElement >( null );
+	const [ labelRoles, setLabelRoles ] = useState< LabelRoles | null >( null );
 	// The chart root positions the tooltip, so pointer and cell coordinates are
 	// measured against it — found by its id rather than by walking up, so
 	// whatever ChartLayout wraps the grid in cannot shift the origin.
@@ -122,32 +127,56 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		overrideColor: primaryColor,
 	} );
 
-	// The cell blend substitutes this role at the cell; this read happens at the scope
-	// element, so an override on the chart's own class makes the two disagree. CHARTS-255.
-	const chartBackgroundHex = normalizeColorToHex(
-		CATALOG_POINTERS.background,
-		scopeElement,
-		resolveCssVariable
-	);
+	// Both read at the scope element, so an override on the chart's own class reaches neither the
+	// fill scale nor the text color (CHARTS-255). See-through counts as white, as for the palette.
+	const resolveAtScope = createCssVariableResolver( scopeElement );
+	const chartBackgroundHex =
+		resolveOpaqueHex( CATALOG_POINTERS.background, resolveAtScope ) ?? BACKGROUND_FALLBACK;
+	const emptyCellHex = resolveOpaqueHex( CATALOG_POINTERS.track, resolveAtScope );
 
-	// Choose text color from the blended fill, not the raw value.
-	// If either color cannot resolve to hex, keep dark text.
+	// If the primary cannot resolve to hex, the stylesheet falls back to its own blend.
 	const primaryHex = normalizeColorToHex( primaryColorHex );
-	const cellHasLightText = ( intensity: number ): boolean =>
-		isValidHexColor( primaryHex ) &&
-		isValidHexColor( chartBackgroundHex ) &&
-		prefersLightText(
-			mixHexColors(
-				primaryHex,
-				chartBackgroundHex,
-				1 - ( CELL_MIX_FLOOR + ( 1 - CELL_MIX_FLOOR ) * intensity )
-			)
-		);
+	const scale = useMemo(
+		() =>
+			isValidHexColor( primaryHex )
+				? getHeatmapScale( primaryHex, chartBackgroundHex, emptyCellHex )
+				: null,
+		[ primaryHex, chartBackgroundHex, emptyCellHex ]
+	);
+	const fillVars = useMemo(
+		() => ( {
+			'--a8c-charts-color-heatmap-primary': primaryColorHex,
+			...( scale && {
+				'--a8c-charts-color-heatmap-low': scale.low,
+				'--a8c-charts-color-heatmap-high': scale.high,
+			} ),
+		} ),
+		[ primaryColorHex, scale ]
+	);
+	// Choose text color from the fill the cell paints, mirroring .heatmap-chart__cell--filled.
+	const cellTextColor = ( intensity: number ): LabelTextColor =>
+		scale
+			? pickLabelTextColorForFill(
+					blendRgb( hexToRgb( scale.high ), hexToRgb( scale.low ), intensity ),
+					labelRoles,
+					'label'
+				)
+			: 'label';
+
+	// Read inside the chart's own class, where the cell text inherits them. Keyed on `data` too,
+	// because the grid is not mounted while there is nothing to draw.
+	useIsomorphicLayoutEffect( () => {
+		if ( ! containerRef.current ) {
+			return;
+		}
+		const next = resolveLabelRoles( createCssVariableResolver( containerRef.current ) );
+		setLabelRoles( previous => ( isEqual( previous, next ) ? previous : next ) );
+	}, [ data, className, primaryColorHex, chartBackgroundHex ] );
 
 	const extent = useMemo( () => getValueExtent( data ), [ data ] );
 	const heatmapContext = useMemo< HeatmapContextValue >(
-		() => ( { extent, primaryColorHex } ),
-		[ extent, primaryColorHex ]
+		() => ( { extent, fillVars } ),
+		[ extent, fillVars ]
 	);
 
 	const columns = data.length;
@@ -371,7 +400,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		)
 		.join( ' ' );
 	const gridStyle: Record< string, string | number > = {
-		'--a8c-charts-color-heatmap-primary': primaryColorHex,
+		...fillVars,
 		gridTemplateColumns: `auto ${ columnTracks }`,
 		gridTemplateRows: `${ hasColumnLabels ? 'auto ' : '' }repeat(${ rows }, ${ rowTrack })${
 			hasGroups ? ' auto' : ''
@@ -523,7 +552,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 										const value = cell?.value ?? null;
 										const present = isPresent( value );
 										// A summary cell is on another scale, so it takes no fill.
-										const filled = present && ! column.summary;
+										const filled = present && ! column.summary && ! isEmptyValue( value, extent );
 										const normalized = filled ? getNormalizedValue( value, extent ) : 0;
 										const info = buildTooltipData( columnIndex, rowIndex );
 										const accessibleLabel = `${ cellName( info ) }: ${
@@ -547,8 +576,6 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 												data-row={ rowIndex }
 												className={ clsx( styles[ 'heatmap-chart__cell' ], {
 													[ styles[ 'heatmap-chart__cell--filled' ] ]: filled,
-													[ styles[ 'heatmap-chart__cell--strong' ] ]:
-														filled && cellHasLightText( normalized ),
 													[ styles[ 'heatmap-chart__cell--summary' ] ]: column.summary,
 													...summaryGaps( columnIndex ),
 													[ styles[ 'heatmap-chart__cell--selected' ] ]:
@@ -566,7 +593,12 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 												onMouseLeave={ handleCellMouseLeave }
 											>
 												{ ( drawValues || column.summary ) && present && (
-													<span className={ styles[ 'heatmap-chart__cell-value' ] }>
+													<span
+														className={ clsx(
+															styles[ 'heatmap-chart__cell-value' ],
+															filled && CELL_VALUE_MODIFIER[ cellTextColor( normalized ) ]
+														) }
+													>
 														{ /* Compact display; tooltip and aria-label keep full precision. */ }
 														{ formatNumberCompact( value ) }
 													</span>
@@ -596,12 +628,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 						) }
 					</div>
 					{ withTooltips && tooltipOpen && tooltipData && (
-						<BoundedTooltip
-							top={ tooltipTop }
-							left={ tooltipLeft }
-							className={ tooltipVariant === 'dark' ? tooltipStyles.surface : undefined }
-							style={ tooltipBoxStyle }
-						>
+						<BoundedTooltip top={ tooltipTop } left={ tooltipLeft } style={ tooltipBoxStyle }>
 							<div className={ standaloneScopeClass } role="tooltip" tabIndex={ -1 }>
 								{ ( renderTooltip ?? defaultRenderTooltip )( tooltipData ) }
 							</div>

package/src/charts/heatmap-chart/private/heatmap-context.ts

@@ -2,8 +2,8 @@ import { createContext } from 'react';
 
 export type HeatmapContextValue = {
 	extent: [ number, number ];
-	/** The resolved primary color (full intensity); the legend mixes toward it in CSS. */
-	primaryColorHex: string;
+	/** The custom properties the fill reads, set on the grid and on each legend swatch. */
+	fillVars: Record< string, string >;
 };
 
 /** Shared by the chart and legend without importing back from `heatmap-chart.tsx`. */

package/src/charts/heatmap-chart/private/heatmap-legend.tsx

@@ -29,7 +29,7 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( {
 	if ( ! context ) {
 		return null;
 	}
-	const { primaryColorHex } = context;
+	const { fillVars } = context;
 	const labelStyle = legend.labelStyles;
 
 	return (
@@ -57,7 +57,7 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( {
 							className={ styles[ 'heatmap-chart__legend-swatch' ] }
 							style={
 								{
-									'--a8c-charts-color-heatmap-primary': primaryColorHex,
+									...fillVars,
 									'--a8c-charts-heatmap-cell-intensity': intensity,
 								} as CSSProperties
 							}