@automattic/charts 2.0.0 → 3.0.0

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

@@ -12,7 +12,7 @@
 
 .main-rate {
 	overflow: hidden;
-	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+	color: var(--a8c-charts-color-label);
 	text-overflow: ellipsis;
 	font-size: var(--wpds-typography-font-size-xl, 18px);
 	font-style: normal;
@@ -54,7 +54,7 @@
 }
 
 .step-label {
-	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-weight: var(--wpds-typography-font-weight-default, 400);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -64,7 +64,7 @@
 }
 
 .step-rate {
-	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+	color: var(--a8c-charts-color-label);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -72,7 +72,7 @@
 
 .bar-container {
 	flex: 1;
-	border-radius: var(--wpds-border-radius-md, 4px);
+	border-radius: var(--a8c-charts-border-radius-bar);
 	position: relative;
 	cursor: pointer;
 }
@@ -80,19 +80,24 @@
 .funnel-bar {
 	width: 100%;
 	min-height: 4px;
-	border-radius: var(--wpds-border-radius-md, 4px) var(--wpds-border-radius-md, 4px) 0 0;
+	border-radius: var(--a8c-charts-border-radius-bar) var(--a8c-charts-border-radius-bar) 0 0;
 
+	// Keep the collapsed state in `from` and never on the element: a dropped
+	// animation then fails visible. `both`, not `forwards`, for backwards fill.
 	&--animated {
 		transform-origin: bottom;
 		transform-box: fill-box;
-		transform: scaleY(0);
 		animation:
-			stretch var(--wpds-motion-duration-xl, 400ms)
-			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
+			stretch var(--a8c-charts-motion-duration-entrance)
+			var(--a8c-charts-motion-easing-entrance) both;
 	}
 
 	@keyframes stretch {
 
+		from {
+			transform: scaleY(0);
+		}
+
 		to {
 			transform: scaleY(1);
 		}
@@ -100,7 +105,7 @@
 }
 
 .tooltip-wrapper {
-	background: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
+	background: var(--a8c-charts-color-surface);
 
 	// Override .visx-tooltip inline styles.
 	border-radius: var(--wpds-border-radius-md, 4px) !important;
@@ -110,7 +115,7 @@
 }
 
 .tooltip-title {
-	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+	color: var(--a8c-charts-color-label);
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-default, 400);
@@ -118,7 +123,7 @@
 }
 
 .tooltip-content {
-	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+	color: var(--a8c-charts-color-label);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
@@ -127,6 +132,6 @@
 
 .empty-state {
 	text-align: center;
-	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 	font-size: var(--wpds-typography-font-size-lg, 16px);
 }

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

@@ -1,16 +1,18 @@
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
-import { type FC, useRef, useMemo, useEffect, useCallback, useContext } from 'react';
+import { type FC, useRef, useMemo, useEffect, useState, useCallback, useContext } from 'react';
 import { usePrefersReducedMotion } from '../../hooks';
 import {
 	GlobalChartsProvider,
 	GlobalChartsContext,
+	ChartScopeContext,
 	useChartId,
 	useChartRegistration,
 	useGlobalChartsTheme,
 	useGlobalChartsContext,
 } from '../../providers';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import { formatPercentage, hexToRgba } from '../../utils';
 import styles from './conversion-funnel-chart.module.scss';
 import { useFunnelSelection } from './private';
@@ -55,6 +57,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef< HTMLDivElement >( null );
 	const selectedBarRef = useRef< HTMLDivElement | null >( null );
+	const [ scopeNode, setScopeNode ] = useState< HTMLElement | null >( null );
 
 	// Use @visx/tooltip hooks for tooltip positioning
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } =
@@ -74,6 +77,20 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 		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 setChartRef = useCallback( ( node: HTMLDivElement | null ) => {
+		// Set containerRef for @visx coordinate system
+		portalContainerRefRef.current( node );
+		chartRef.current = node;
+		setScopeNode( node );
+	}, [] );
+
 	// Wrapper to clear selectedBarRef after clearing selection
 	const clearSelectionAndRef = useCallback( () => {
 		clearSelection();
@@ -303,6 +320,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 				align="center"
 				justify="center"
 				data-testid="conversion-funnel-chart"
+				ref={ setScopeNode }
 				className={ clsx(
 					styles[ 'conversion-funnel-chart' ],
 					loading && styles[ 'conversion-funnel-chart--loading' ],
@@ -326,11 +344,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 				direction="column"
 				gap="xl"
 				data-testid="conversion-funnel-chart"
-				ref={ node => {
-					// Set containerRef for @visx coordinate system
-					portalContainerRef( node );
-					chartRef.current = node;
-				} }
+				ref={ setChartRef }
 				className={ clsx(
 					styles[ 'conversion-funnel-chart' ],
 					loading && styles[ 'conversion-funnel-chart--loading' ],
@@ -338,89 +352,96 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 				) }
 				style={ { ...style, height: resolvedHeight } }
 			>
-				{ /* 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 (
-							<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 */ }
+				<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 (
 								<Stack
+									key={ step.id }
 									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 } }
+									data-testid="funnel-step"
+									className={ clsx(
+										styles[ 'funnel-step' ],
+										isColorPaletteResolved && styles[ 'funnel-step--animated' ],
+										isBlurred && styles[ 'funnel-step--blurred' ]
+									) }
+									gap="xl"
 								>
-									<div
-										className={ clsx( styles[ 'funnel-bar' ], {
-											[ styles[ 'funnel-bar--animated' ] ]:
-												animation && ! loading && ! prefersReducedMotion,
-										} ) }
-										style={ {
-											height: `${ barHeight }%`,
-											backgroundColor: barColor,
-										} }
-									/>
+									{ /* 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>
 								</Stack>
-							</Stack>
-						);
-					} ) }
-				</Stack>
+							);
+						} ) }
+					</Stack>
+				</ChartScopeContext.Provider>
 			</Stack>
 
 			{ /* Tooltip Portal */ }
@@ -446,7 +467,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 							key={ Math.random() }
 							top={ tooltipTop }
 							left={ tooltipLeft }
-							className={ styles[ 'tooltip-wrapper' ] }
+							className={ clsx( CHART_SCOPE_CLASS, styles[ 'tooltip-wrapper' ] ) }
 						>
 							{ tooltipContent }
 						</TooltipInPortal>

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

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import { useContext } from 'react';
+import { ChartScopeContext } from '../../../providers/chart-scope';
+import ConversionFunnelChart from '../conversion-funnel-chart';
+import type { FunnelStep } from '../types';
+
+const steps: FunnelStep[] = [
+	{ id: 'sessions', label: 'Sessions', rate: 100, count: 10000 },
+	{ id: 'purchase', label: 'Purchase', rate: 10.3, count: 1030 },
+];
+
+const ScopeProbe = () => {
+	const scopeNode = useContext( ChartScopeContext );
+	return <span data-testid="scope-probe">{ scopeNode ? 'has-scope' : 'no-scope' }</span>;
+};
+
+const renderScopeProbe = () => <ScopeProbe />;
+
+describe( 'ConversionFunnelChart chart scope', () => {
+	it( 'publishes a non-null scope node after transitioning from empty to populated steps', () => {
+		// The normal loading pattern: steps arrives empty first (empty-state branch renders), then populated (main branch renders). The scope node must be republished on that transition, not frozen at whatever the first mount saw.
+		const { rerender } = render(
+			<ConversionFunnelChart mainRate={ 0 } steps={ [] } renderMainMetric={ renderScopeProbe } />
+		);
+
+		rerender(
+			<ConversionFunnelChart
+				mainRate={ 10.3 }
+				steps={ steps }
+				renderMainMetric={ renderScopeProbe }
+			/>
+		);
+
+		expect( screen.getByTestId( 'scope-probe' ) ).toHaveTextContent( 'has-scope' );
+	} );
+} );

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

@@ -8,7 +8,12 @@ import { Chart, type GoogleChartPackages, type ReactGoogleChartEvent } from 'rea
 /**
  * Internal dependencies
  */
-import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';
+import {
+	GlobalChartsContext,
+	GlobalChartsProvider,
+	useChartScopeElement,
+	useGlobalChartsContext,
+} from '../../providers';
 import { lightenHexColor, normalizeColorToHex } from '../../utils/color-utils';
 import { resolveCssVariable } from '../../utils/resolve-css-var';
 import { sanitizeHtml } from '../../utils/sanitize-html';
@@ -146,6 +151,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			backgroundColor,
 		},
 	} = useGlobalChartsContext();
+	const scopeElement = useChartScopeElement();
 	const containerRef = useRef< HTMLDivElement >( null );
 	const reportedErrorIdsRef = useRef< Set< string > >( new Set() );
 
@@ -204,11 +210,13 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	// Google charts doesn't accept CSS variables, so we need to convert them to hex colors
 	const fullColorHex = getElementStyles( { index: 0 } ).color;
 	const lightColorHex = lightenHexColor( fullColorHex, 0.8 );
-	// Use normalizeColorToHex to ensure HSL/RGB values from CSS variables are converted to hex
+	// 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, null, resolveCssVariable ) || DEFAULT_BACKGROUND_COLOR;
+		normalizeColorToHex( backgroundColor, scopeElement, resolveCssVariable ) ||
+		DEFAULT_BACKGROUND_COLOR;
 	const defaultFillColorHex =
-		normalizeColorToHex( featureFillColor, null, resolveCssVariable ) || DEFAULT_FEATURE_FILL_COLOR;
+		normalizeColorToHex( featureFillColor, scopeElement, resolveCssVariable ) ||
+		DEFAULT_FEATURE_FILL_COLOR;
 
 	// Identify HTML tooltip column indices and sanitize their content to prevent XSS.
 	const sanitizedData = useMemo( () => {

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

@@ -19,13 +19,17 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 
 .heatmap-chart__empty {
 	padding: var(--wpds-dimension-padding-lg, 16px);
-	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 }
 
 // Track template is set inline because CSS `repeat()` won't take a `var()`
 // count. ARIA rows are `display: contents` so their cells join this grid.
 .heatmap-chart__grid {
 	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));
 	flex: 1 1 0;
 	width: 100%;
@@ -35,7 +39,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	&:focus-visible {
 		outline:
 			$focus-ring-width solid
-			var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
+			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
 		outline-offset: 2px;
 		border-radius: var(--wpds-border-radius-sm, 2px);
 	}
@@ -63,7 +67,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, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 	font-size: var(--wpds-typography-font-size-xs, 11px);
 	white-space: nowrap;
 	overflow: visible;
@@ -87,9 +91,9 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	justify-content: center;
 	min-width: 0;
 	min-height: 0;
-	border-radius: var(--wpds-border-radius-sm, 2px);
+	border-radius: var(--a8c-charts-border-radius-cell);
 	// Empty (no-data) default; cells with a value override it below.
-	background: var(--a8c-charts-color-track, var(--wpds-color-background-track-neutral-weak, #f0f0f0));
+	background: var(--a8c-charts-color-track);
 }
 
 // An empty grid slot (calendar ragged edges): keeps its track but paints and
@@ -108,24 +112,24 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 .heatmap-chart__cell--selected {
 	outline:
 		$focus-ring-width solid
-		var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
+		var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
 	outline-offset: calc(-1 * #{$focus-ring-width});
 }
 
 .heatmap-chart__cell-value {
-	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+	color: var(--a8c-charts-color-label);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 }
 
 // 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 {
-	color: var(--a8c-charts-color-label-inverse, var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0));
+	color: var(--a8c-charts-color-label-inverse);
 }
 
 .heatmap-chart__legend-swatch {
 	width: var(--wpds-dimension-size-3xs, 12px);
 	height: var(--wpds-dimension-size-3xs, 12px);
-	border-radius: var(--wpds-border-radius-sm, 2px);
+	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));
 }

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

@@ -6,9 +6,11 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
 import {
 	GlobalChartsProvider,
 	useChartId,
+	useChartScopeElement,
 	useGlobalChartsContext,
 	GlobalChartsContext,
 } from '../../providers';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import { attachSubComponents } from '../../utils';
 import {
 	isValidHexColor,
@@ -16,6 +18,7 @@ import {
 	normalizeColorToHex,
 	prefersLightText,
 } from '../../utils/color-utils';
+import { resolveCssVariable } from '../../utils/resolve-css-var';
 import { Center } from '../private/center';
 import { useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
@@ -58,7 +61,8 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	children,
 } ) => {
 	const chartId = useChartId( providedChartId );
-	const { getElementStyles, resolveThemeColor, theme } = useGlobalChartsContext();
+	const { getElementStyles, theme } = useGlobalChartsContext();
+	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
 	const { nonLegendChildren } = useChartChildren( children, 'HeatmapChart' );
 
@@ -79,9 +83,12 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		overrideColor: primaryColor || heatmapChartSettings.primaryColor,
 	} );
 
-	// Resolve the background in the provider's theme scope so the blended-fill text
-	// color tracks a themed (e.g. dark) background.
-	const chartBackgroundHex = resolveThemeColor( theme.backgroundColor );
+	// Resolve the background against this chart's own scope element (not the provider's), matching where `--a8c-charts-color-heatmap-background` is substituted for the cell blend below — a chart-level override otherwise disagrees with a provider-level read.
+	const chartBackgroundHex = normalizeColorToHex(
+		theme.backgroundColor,
+		scopeElement,
+		resolveCssVariable
+	);
 
 	// Choose text color from the blended fill, not the raw value.
 	// If either color cannot resolve to hex, keep dark text.
@@ -443,7 +450,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 					</div>
 					{ withTooltips && tooltipOpen && tooltipData && (
 						<TooltipInPortal top={ tooltipTop } left={ tooltipLeft }>
-							<div role="tooltip" tabIndex={ -1 }>
+							<div className={ CHART_SCOPE_CLASS } role="tooltip" tabIndex={ -1 }>
 								{ ( renderTooltip ?? defaultRenderTooltip )( tooltipData ) }
 							</div>
 						</TooltipInPortal>

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

@@ -60,20 +60,26 @@
 		// row's fixed-pixel hover inset from collapsing a narrow bar to nothing.
 		min-width: var(--wpds-dimension-size-5xs, 4px);
 
-		border-radius: var(--a8c-charts-border-radius-leaderboard-bar, var(--a8c--charts--leaderboard--bar--border-radius, 9999px));
+		border-radius: var(--a8c-charts-border-radius-leaderboard-bar);
 		z-index: -1; /* places it behind the label */
 
+		// Keep the collapsed state in `from` and never on the element: a dropped
+		// animation then fails visible. `both`, not `forwards`, for the
+		// backwards fill.
 		&--animated {
 			transform-origin: left;
 			transform-box: fill-box;
-			transform: scaleX(0);
 			animation:
-				stretch var(--wpds-motion-duration-xl, 400ms)
-				var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
+				stretch var(--a8c-charts-motion-duration-entrance)
+				var(--a8c-charts-motion-easing-entrance) both;
 		}
 
 		@keyframes stretch {
 
+			from {
+				transform: scaleX(0);
+			}
+
 			to {
 				transform: scaleX(1);
 			}
@@ -104,7 +110,7 @@
 .emptyState {
 	padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
 	text-align: center;
-	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: italic;
 }
@@ -205,7 +211,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 		border-radius: var(--wpds-border-radius-sm, 2px);
 		outline:
 			$focus-ring-width solid
-			var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
+			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
 		// Inset by its own width so the outer edge hugs the row boundary: the
 		// outline then sits in the shared row padding, clear of the bar, and stays
 		// inside the overflow:auto container that would clip an outset ring.
@@ -220,7 +226,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	bottom: 0;
 	margin-block: auto;
 	opacity: 0;
-	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 	transition:
 		opacity var(--wpds-motion-duration-sm, 100ms)
 		var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));

package/src/charts/leaderboard-chart/types.ts

@@ -65,8 +65,6 @@ export interface LeaderboardChartProps
 	 */
 	style?: React.CSSProperties & {
 		'--a8c-charts-border-radius-leaderboard-bar'?: string;
-		/** @deprecated Use `--a8c-charts-border-radius-leaderboard-bar`. */
-		'--a8c--charts--leaderboard--bar--border-radius'?: string;
 	};
 
 	/**

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

@@ -1,14 +1,15 @@
 .line-chart {
 	position: relative;
 
+	// Keep the collapsed state in `from` and never on the element: a dropped
+	// animation then fails visible. `both`, not `forwards`, for backwards fill.
 	&--animated {
 
 		path {
 			transform-origin: 0 95%;
-			transform: scaleY(0);
 			animation:
-				rise var(--wpds-motion-duration-xl, 400ms)
-				var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
+				rise var(--a8c-charts-motion-duration-entrance)
+				var(--a8c-charts-motion-easing-entrance) both;
 		}
 	}
 
@@ -18,8 +19,8 @@
 
 	&__tooltip,
 	&__annotation-label-popover {
-		background: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
-		color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+		background: var(--a8c-charts-color-surface);
+		color: var(--a8c-charts-color-label);
 		padding: var(--wpds-dimension-padding-sm, 8px);
 	}
 
@@ -110,6 +111,10 @@
 
 @keyframes rise {
 
+	from {
+		transform: scaleY(0);
+	}
+
 	to {
 		transform: scaleY(1);
 	}