@automattic/charts 3.1.1 → 4.0.0

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

@@ -1,7 +1,8 @@
-import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { useTooltip } from '@visx/tooltip';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { type FC, useRef, useMemo, useEffect, useState, useCallback, useContext } from 'react';
+import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
 import { usePrefersReducedMotion } from '../../hooks';
 import {
 	GlobalChartsProvider,
@@ -9,11 +10,11 @@ import {
 	ChartScopeContext,
 	useChartId,
 	useChartRegistration,
-	useGlobalChartsTheme,
 	useGlobalChartsContext,
 } from '../../providers';
-import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
-import { formatPercentage, hexToRgba } from '../../utils';
+import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
+import { useStandaloneScopeClass } from '../../providers/chart-scope';
+import { formatPercentage } from '../../utils';
 import styles from './conversion-funnel-chart.module.scss';
 import { useFunnelSelection } from './private';
 import type { FunnelStep, ConversionFunnelChartProps } from './types';
@@ -53,7 +54,6 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	renderTooltip,
 } ) => {
 	const chartId = useChartId( providedChartId );
-	const { conversionFunnelChart: conversionFunnelChartSettings } = useGlobalChartsTheme();
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef< HTMLDivElement >( null );
 	const selectedBarRef = useRef< HTMLDivElement | null >( null );
@@ -66,27 +66,9 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	// Use custom hook for selection management
 	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } =
 		useFunnelSelection( hideTooltip );
-	const {
-		containerRef: portalContainerRef,
-		TooltipInPortal,
-		containerBounds,
-	} = useTooltipInPortal( {
-		// use TooltipWithBounds for boundary detection
-		detectBounds: true,
-		// when tooltip containers are scrolled, this will correctly update the Tooltip position
-		scroll: true,
-	} );
-
-	// `useTooltipInPortal` returns a fresh `containerRef` closure on every render, so depending on it directly would give this callback a new identity every render — React then detaches and reattaches the ref on every commit, flushing the scope context to null and back. Reading it through a ref keeps the callback's identity genuinely stable.
-	const portalContainerRefRef = useRef( portalContainerRef );
-	useEffect( () => {
-		portalContainerRefRef.current = portalContainerRef;
-	}, [ portalContainerRef ] );
-
-	// Stable identity so React doesn't detach/reattach (and re-render the scope context) on every commit. Keep all three assignments, in the same order, and keep it firing on unmount (node === null).
+	const standaloneScopeClass = useStandaloneScopeClass();
+	// Stable identity so React doesn't detach/reattach (and re-render the scope context) on every commit. Keep it firing on unmount (node === null).
 	const setChartRef = useCallback( ( node: HTMLDivElement | null ) => {
-		// Set containerRef for @visx coordinate system
-		portalContainerRefRef.current( node );
 		chartRef.current = node;
 		setScopeNode( node );
 	}, [] );
@@ -110,43 +92,32 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 		[ showTooltip ]
 	);
 
-	// Helper function to get tooltip coordinates for mouse events
-	// Use clientX/Y and subtract containerBounds to cancel out any stale offset.
-	// TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX
-	// By passing (clientX - containerBounds.left), we get correct page coordinates
-	// regardless of whether bounds are stale (e.g., after dashboard customization).
-	const getMouseTooltipCoords = useCallback(
-		( event: React.MouseEvent ) => {
-			// Don't return coords until container bounds are measured
-			if ( containerBounds.width === 0 || containerBounds.height === 0 ) {
-				return null;
-			}
+	// The chart root positions the tooltip, so coordinates are taken relative to it.
+	const getMouseTooltipCoords = useCallback( ( event: React.MouseEvent ) => {
+		const bounds = chartRef.current?.getBoundingClientRect();
+		if ( ! bounds ) {
+			return null;
+		}
 
-			return {
-				x: event.clientX - containerBounds.left,
-				y: event.clientY - containerBounds.top,
-			};
-		},
-		[ containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top ]
-	);
-
-	// Helper function to get tooltip coordinates for keyboard events
-	// Use fresh getBoundingClientRect() and subtract containerBounds to cancel out stale offset.
-	const getKeyboardTooltipCoords = useCallback(
-		( event: React.KeyboardEvent ) => {
-			// Don't return coords until container bounds are measured
-			if ( containerBounds.width === 0 || containerBounds.height === 0 ) {
-				return null;
-			}
+		return {
+			x: event.clientX - bounds.left,
+			y: event.clientY - bounds.top,
+		};
+	}, [] );
 
-			const rect = event.currentTarget.getBoundingClientRect();
-			// Calculate center of element in viewport coordinates, then subtract containerBounds
-			const x = rect.left + rect.width / 2 - containerBounds.left;
-			const y = rect.top - containerBounds.top;
-			return { x, y };
-		},
-		[ containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top ]
-	);
+	// Keyboard interaction anchors the tooltip at the top centre of the focused step.
+	const getKeyboardTooltipCoords = useCallback( ( event: React.KeyboardEvent ) => {
+		const bounds = chartRef.current?.getBoundingClientRect();
+		if ( ! bounds ) {
+			return null;
+		}
+
+		const rect = event.currentTarget.getBoundingClientRect();
+		return {
+			x: rect.left + rect.width / 2 - bounds.left,
+			y: rect.top - bounds.top,
+		};
+	}, [] );
 
 	// Helper function to handle step interaction (both click and keyboard)
 	const handleStepInteraction = useCallback(
@@ -246,32 +217,26 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	// Resolve height: explicit height prop > style.height > default 100%
 	const resolvedHeight = height ?? style?.height ?? '100%';
 
-	// Get component settings from theme with fallbacks
-	const { primaryColor, backgroundColor, positiveChangeColor, negativeChangeColor } =
-		conversionFunnelChartSettings;
-
-	// Resolve bar color using getElementStyles with primaryColor as override
+	// The bar takes the first palette slot; move `--a8c-charts-color-series-1` to change it.
 	const { color: barColor } = getElementStyles
-		? getElementStyles( {
-				index: 0,
-				overrideColor: primaryColor,
-		  } )
-		: { color: primaryColor || '#000000' };
+		? getElementStyles( { index: 0 } )
+		: { color: '#000000' };
 
-	// Determine change indicator color
 	const isPositiveChange = changeIndicator?.startsWith( '+' );
-	const changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;
-
-	// Create light background version of primary color if not set
-	const barBackgroundColor =
-		backgroundColor || hexToRgba( barColor, 0.08 ) || 'rgba(0, 0, 0, 0.08)';
+	// Only for `renderMainMetric`, which hands a consumer's own markup something to paint with.
+	const changeColor = isPositiveChange ? CATALOG_POINTERS.trendUp : CATALOG_POINTERS.trendDown;
 
 	// Default main metric rendering function
 	const renderDefaultMainMetric = () => (
 		<>
 			<span className={ styles[ 'main-rate' ] }>{ formatPercentage( mainRate ) }</span>
 			{ changeIndicator && (
-				<span className={ styles[ 'change-indicator' ] } style={ { color: changeColor } }>
+				<span
+					className={ clsx(
+						styles[ 'change-indicator' ],
+						styles[ isPositiveChange ? 'change-indicator--positive' : 'change-indicator--negative' ]
+					) }
+				>
 					{ changeIndicator }
 				</span>
 			) }
@@ -322,6 +287,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 				data-testid="conversion-funnel-chart"
 				ref={ setScopeNode }
 				className={ clsx(
+					'conversion-funnel-chart',
 					styles[ 'conversion-funnel-chart' ],
 					loading && styles[ 'conversion-funnel-chart--loading' ],
 					className
@@ -339,112 +305,104 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	const maxRate = Math.max( ...steps.map( step => step.rate ) );
 
 	return (
-		<>
-			<Stack
-				direction="column"
-				gap="xl"
-				data-testid="conversion-funnel-chart"
-				ref={ setChartRef }
-				className={ clsx(
-					styles[ 'conversion-funnel-chart' ],
-					loading && styles[ 'conversion-funnel-chart--loading' ],
-					className
+		<Stack
+			direction="column"
+			gap="xl"
+			data-testid="conversion-funnel-chart"
+			ref={ setChartRef }
+			className={ clsx(
+				'conversion-funnel-chart',
+				styles[ 'conversion-funnel-chart' ],
+				loading && styles[ 'conversion-funnel-chart--loading' ],
+				className
+			) }
+			style={ { ...style, height: resolvedHeight } }
+		>
+			<ChartScopeContext.Provider value={ scopeNode }>
+				{ /* Main Metric */ }
+				{ renderMainMetric ? (
+					renderMainMetric( {
+						mainRate,
+						changeIndicator,
+						className: styles[ 'main-metric' ],
+						changeColor,
+					} )
+				) : (
+					<Stack direction="row" align="baseline" gap="sm" className={ styles[ 'main-metric' ] }>
+						{ renderDefaultMainMetric() }
+					</Stack>
 				) }
-				style={ { ...style, height: resolvedHeight } }
-			>
-				<ChartScopeContext.Provider value={ scopeNode }>
-					{ /* Main Metric */ }
-					{ renderMainMetric ? (
-						renderMainMetric( {
-							mainRate,
-							changeIndicator,
-							className: styles[ 'main-metric' ],
-							changeColor,
-						} )
-					) : (
-						<Stack direction="row" align="baseline" gap="sm" className={ styles[ 'main-metric' ] }>
-							{ renderDefaultMainMetric() }
-						</Stack>
-					) }
 
-					{ /* Funnel Steps */ }
-					<Stack
-						direction="row"
-						align="flex-end"
-						gap="lg"
-						className={ styles[ 'funnel-container' ] }
-					>
-						{ steps.map( ( step, index ) => {
-							const barHeight = ( step.rate / maxRate ) * 100;
-							const { isBlurred } = getStepState( step.id );
-
-							return (
+				{ /* Funnel Steps */ }
+				<Stack direction="row" align="flex-end" gap="lg" className={ styles[ 'funnel-container' ] }>
+					{ steps.map( ( step, index ) => {
+						const barHeight = ( step.rate / maxRate ) * 100;
+						const { isBlurred } = getStepState( step.id );
+
+						return (
+							<Stack
+								key={ step.id }
+								direction="column"
+								data-testid="funnel-step"
+								className={ clsx(
+									styles[ 'funnel-step' ],
+									isColorPaletteResolved && styles[ 'funnel-step--animated' ],
+									isBlurred && styles[ 'funnel-step--blurred' ]
+								) }
+								gap="xl"
+							>
+								{ /* Step Label and Rate */ }
+								<Stack direction="column" gap="xs">
+									{ renderStepLabel ? (
+										renderStepLabel( {
+											step,
+											index,
+											className: styles[ 'step-label' ],
+										} )
+									) : (
+										<span className={ styles[ 'step-label' ] }>{ step.label }</span>
+									) }
+									{ renderStepRate ? (
+										renderStepRate( {
+											step,
+											index,
+											className: styles[ 'step-rate' ],
+										} )
+									) : (
+										<span className={ styles[ 'step-rate' ] }>
+											{ formatPercentage( step.rate ) }
+										</span>
+									) }
+								</Stack>
+
+								{ /* Funnel Bar */ }
 								<Stack
-									key={ step.id }
 									direction="column"
-									data-testid="funnel-step"
-									className={ clsx(
-										styles[ 'funnel-step' ],
-										isColorPaletteResolved && styles[ 'funnel-step--animated' ],
-										isBlurred && styles[ 'funnel-step--blurred' ]
-									) }
-									gap="xl"
+									justify="flex-end"
+									className={ styles[ 'bar-container' ] }
+									onClick={ stepHandlers.get( step.id )?.onClick }
+									onKeyDown={ stepHandlers.get( step.id )?.onKeyDown }
+									role="button"
+									tabIndex={ isBlurred ? -1 : 0 }
+									aria-label={ step.label }
 								>
-									{ /* Step Label and Rate */ }
-									<Stack direction="column" gap="xs">
-										{ renderStepLabel ? (
-											renderStepLabel( {
-												step,
-												index,
-												className: styles[ 'step-label' ],
-											} )
-										) : (
-											<span className={ styles[ 'step-label' ] }>{ step.label }</span>
-										) }
-										{ renderStepRate ? (
-											renderStepRate( {
-												step,
-												index,
-												className: styles[ 'step-rate' ],
-											} )
-										) : (
-											<span className={ styles[ 'step-rate' ] }>
-												{ formatPercentage( step.rate ) }
-											</span>
-										) }
-									</Stack>
-
-									{ /* Funnel Bar */ }
-									<Stack
-										direction="column"
-										justify="flex-end"
-										className={ styles[ 'bar-container' ] }
-										onClick={ stepHandlers.get( step.id )?.onClick }
-										onKeyDown={ stepHandlers.get( step.id )?.onKeyDown }
-										role="button"
-										tabIndex={ isBlurred ? -1 : 0 }
-										aria-label={ step.label }
-										style={ { backgroundColor: barBackgroundColor } }
-									>
-										<div
-											className={ clsx( styles[ 'funnel-bar' ], {
-												[ styles[ 'funnel-bar--animated' ] ]:
-													animation && ! loading && ! prefersReducedMotion,
-											} ) }
-											style={ {
-												height: `${ barHeight }%`,
-												backgroundColor: barColor,
-											} }
-										/>
-									</Stack>
+									<div
+										className={ clsx( styles[ 'funnel-bar' ], {
+											[ styles[ 'funnel-bar--animated' ] ]:
+												animation && ! loading && ! prefersReducedMotion,
+										} ) }
+										style={ {
+											height: `${ barHeight }%`,
+											backgroundColor: barColor,
+										} }
+									/>
 								</Stack>
-							);
-						} ) }
-					</Stack>
-				</ChartScopeContext.Provider>
-			</Stack>
+							</Stack>
+						);
+					} ) }
+				</Stack>
+			</ChartScopeContext.Provider>
 
-			{ /* Tooltip Portal */ }
 			{ tooltipOpen &&
 				tooltipData &&
 				( () => {
@@ -462,18 +420,16 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 					if ( ! tooltipContent ) return null;
 
 					return (
-						<TooltipInPortal
-							// set this to random so it correctly updates with parent bounds
-							key={ Math.random() }
+						<BoundedTooltip
 							top={ tooltipTop }
 							left={ tooltipLeft }
-							className={ clsx( CHART_SCOPE_CLASS, styles[ 'tooltip-wrapper' ] ) }
+							className={ clsx( standaloneScopeClass, styles[ 'tooltip-wrapper' ] ) }
 						>
 							{ tooltipContent }
-						</TooltipInPortal>
+						</BoundedTooltip>
 					);
 				} )() }
-		</>
+		</Stack>
 	);
 };
 

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

@@ -473,3 +473,49 @@ describe( 'ConversionFunnelChart', () => {
 		} );
 	} );
 } );
+
+// Chart container at (100, 50); the tooltip box measures 120x40. Everything
+// else the charts measure (wrapper, clipping lookups) reports the container.
+const mockRects = () =>
+	jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+		this: Element
+	) {
+		const box = this.classList.contains( 'visx-tooltip' );
+		return {
+			left: box ? 0 : 100,
+			top: box ? 0 : 50,
+			width: box ? 120 : 400,
+			height: box ? 40 : 300,
+			right: box ? 120 : 500,
+			bottom: box ? 40 : 350,
+			x: box ? 0 : 100,
+			y: box ? 0 : 50,
+			toJSON: () => ( {} ),
+		} as DOMRect;
+	} );
+
+describe( 'ConversionFunnelChart tooltip position', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	it( 'places the box relative to the chart root, at the click plus the offsets', async () => {
+		mockRects();
+		const user = userEvent.setup();
+		renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+		const bar = screen.getAllByRole( 'button' )[ 0 ];
+		await user.pointer( [
+			{ target: bar, coords: { clientX: 180, clientY: 140 } },
+			{ keys: '[MouseLeft]', target: bar, coords: { clientX: 180, clientY: 140 } },
+		] );
+
+		// (180, 140) is (80, 90) inside the root; the chart lifts the anchor 10px
+		// above the click, and the box adds 10px each way.
+		const box = screen.getByTestId( 'bounded-tooltip' );
+		expect( screen.getByTestId( 'conversion-funnel-chart' ) ).toContainElement( box );
+		expect( box ).toHaveStyle( {
+			transform: 'translate(90px, 90px)',
+		} );
+	} );
+} );

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

@@ -1,5 +1,6 @@
 .container {
 	position: relative;
+	background-color: var(--a8c-charts-color-background, #fff);
 
 	// Google gives its HTML tooltip no width, so the box shrink-to-fits against
 	// whatever room is left beside the hovered feature. Near a map edge that

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

@@ -14,6 +14,7 @@ import {
 	useChartScopeElement,
 	useGlobalChartsContext,
 } from '../../providers';
+import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
 import { lightenHexColor, normalizeColorToHex } from '../../utils/color-utils';
 import { resolveCssVariable } from '../../utils/resolve-css-var';
 import { sanitizeHtml } from '../../utils/sanitize-html';
@@ -144,13 +145,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	onError,
 	renderPlaceholder,
 } ) => {
-	const {
-		getElementStyles,
-		theme: {
-			geoChart: { featureFillColor },
-			backgroundColor,
-		},
-	} = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const containerRef = useRef< HTMLDivElement >( null );
 	const reportedErrorIdsRef = useRef< Set< string > >( new Set() );
@@ -212,10 +207,10 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	const lightColorHex = lightenHexColor( fullColorHex, 0.8 );
 	// Use normalizeColorToHex to ensure HSL/RGB values from CSS variables are converted to hex. Google Charts takes a resolved-hex snapshot at render, so this does not live-update on a theme change without a re-render — an accepted asymmetry vs CSS-painted elements.
 	const backgroundColorHex =
-		normalizeColorToHex( backgroundColor, scopeElement, resolveCssVariable ) ||
+		normalizeColorToHex( CATALOG_POINTERS.background, scopeElement, resolveCssVariable ) ||
 		DEFAULT_BACKGROUND_COLOR;
 	const defaultFillColorHex =
-		normalizeColorToHex( featureFillColor, scopeElement, resolveCssVariable ) ||
+		normalizeColorToHex( CATALOG_POINTERS.surfaceSecondary, scopeElement, resolveCssVariable ) ||
 		DEFAULT_FEATURE_FILL_COLOR;
 
 	// Identify HTML tooltip column indices and sanitize their content to prevent XSS.
@@ -306,7 +301,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			ref={ containerRef }
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart"
-			style={ { width, height, backgroundColor } }
+			style={ { width, height } }
 		>
 			<Chart
 				chartType="GeoChart"

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

@@ -142,7 +142,7 @@ describe( 'GeoChart', () => {
 	} );
 
 	describe( 'Chart Options', () => {
-		test( 'configures color axis with theme colors', () => {
+		test( 'configures a two-stop color axis from the palette', () => {
 			renderWithTheme();
 
 			const chartOptions = screen.getByTestId( 'chart-options' );
@@ -152,7 +152,7 @@ describe( 'GeoChart', () => {
 			expect( options.colorAxis.colors ).toHaveLength( 2 );
 		} );
 
-		test( 'sets datalessRegionColor from theme', () => {
+		test( 'sets datalessRegionColor from the surface-secondary role', () => {
 			renderWithTheme();
 
 			const chartOptions = screen.getByTestId( 'chart-options' );

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

@@ -1,13 +1,14 @@
 // Focus-ring width shared across the grid and cell-selected focus outlines. A
 // Sass var, not a custom property: a compile-time constant scoped to this
 // module, so it needs no runtime cascade and never lands on the DOM.
-$focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+$focus-ring-width: var(--wpds-border-width-focus);
 
 .heatmap-chart {
+	position: relative;
 	width: 100%;
 	height: 100%;
 	min-height: 0;
-	font-size: var(--wpds-typography-font-size-sm, 12px);
+	font-size: var(--wpds-typography-font-size-sm);
 }
 
 // Height-capped grids are content-sized vertically, so the wrapper hugs them
@@ -18,7 +19,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 }
 
 .heatmap-chart__empty {
-	padding: var(--wpds-dimension-padding-lg, 16px);
+	padding: var(--wpds-dimension-padding-lg);
 	color: var(--a8c-charts-color-label-secondary);
 }
 
@@ -28,9 +29,9 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	display: grid;
 	// --a8c-charts-dimension-heatmap-cell-gap is component-emitted from JS per
 	// render, not a catalog entry. Do not collapse this to a bare var(); the
-	// inner WPDS fallback is the only value this property has when the JS var
-	// is unset.
-	gap: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
+	// inner WPDS token (fallback injected at build) is the only value this
+	// property has when the JS var is unset.
+	gap: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs));
 	flex: 1 1 0;
 	width: 100%;
 	// Override flex's auto minimum so short widgets do not scroll.
@@ -39,9 +40,9 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	&:focus-visible {
 		outline:
 			$focus-ring-width solid
-			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+			var(--wpds-color-stroke-focus);
 		outline-offset: 2px;
-		border-radius: var(--wpds-border-radius-sm, 2px);
+		border-radius: var(--wpds-border-radius-sm);
 	}
 }
 
@@ -68,7 +69,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 .heatmap-chart__col-label,
 .heatmap-chart__row-label {
 	color: var(--a8c-charts-color-label-secondary);
-	font-size: var(--wpds-typography-font-size-xs, 11px);
+	font-size: var(--wpds-typography-font-size-xs);
 	white-space: nowrap;
 	overflow: visible;
 }
@@ -82,7 +83,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	align-self: center;
 	justify-self: end;
 	text-align: right;
-	padding-inline-end: var(--wpds-dimension-padding-xs, 4px);
+	padding-inline-end: var(--wpds-dimension-padding-xs);
 }
 
 .heatmap-chart__cell {
@@ -115,19 +116,19 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 // 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-heatmap-background, #fff));
+	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));
 }
 
 .heatmap-chart__cell--selected {
 	outline:
 		$focus-ring-width solid
-		var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+		var(--wpds-color-stroke-focus);
 	outline-offset: calc(-1 * #{$focus-ring-width});
 }
 
 .heatmap-chart__cell-value {
 	color: var(--a8c-charts-color-label);
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 }
 
 // Light text on fills dark enough to out-contrast dark text (decided in JS from
@@ -136,9 +137,13 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	color: var(--a8c-charts-color-label-inverse);
 }
 
+.heatmap-chart__legend-label {
+	color: var(--a8c-charts-color-label);
+}
+
 .heatmap-chart__legend-swatch {
-	width: var(--wpds-dimension-size-3xs, 12px);
-	height: var(--wpds-dimension-size-3xs, 12px);
+	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-heatmap-background, #fff));
+	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));
 }