@automattic/charts 4.5.0 → 4.7.0

package/src/components/tooltip/test/xy-chart-tooltip.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import { BarSeries, buildChartTheme, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
+import { BarSeries, LineSeries, TooltipContext, XYChart } from '@visx/xychart';
 import { useContext, useEffect } from 'react';
 import { XyChartTooltip } from '../xy-chart-tooltip';
 import type { XyChartTooltipProps } from '../../../visx/types';
@@ -103,20 +103,35 @@ const renderChart = (
 
 describe( 'XyChartTooltip', () => {
 	test.each( [
-		[ 'CanvasText', '0 1px 2px #22222255' ],
-		[ '#123456', '0 1px 2px #12345655' ],
-	] )( 'renders a valid shadow for htmlLabel color %s', async ( color, boxShadow ) => {
-		const theme = buildChartTheme( {
-			backgroundColor: '#ffffff',
-			colors: [ '#123456' ],
-			tickLength: 4,
-			gridColor: '#dddddd',
-			gridColorDark: '#222222',
-			htmlLabel: { color },
-		} );
-		renderChart( {}, undefined, undefined, theme );
+		[ 'bounded', {} ],
+		[ 'unbounded', { detectBounds: false } ],
+		[ 'below-axis', { tooltipPlacement: 'below-axis' as const } ],
+	] )( 'draws the %s box on the package surface, with no visx box styles', async ( _, props ) => {
+		renderChart( props );
+		const box = await screen.findByTestId( 'tooltip-box' );
+		expect( box ).toHaveClass( 'surface' );
+		expect( box ).not.toHaveAttribute( 'style', expect.stringContaining( 'box-shadow' ) );
+		expect( box ).not.toHaveAttribute( 'style', expect.stringContaining( 'background-color' ) );
+		expect( box ).not.toHaveAttribute( 'style', expect.stringContaining( 'padding' ) );
+		expect( box ).not.toHaveAttribute( 'style', expect.stringContaining( 'border-radius' ) );
+	} );
+
+	test( 'strips the surface from an unbounded box when unstyled', async () => {
+		renderChart( { detectBounds: false, unstyled: true } );
+		const box = await screen.findByTestId( 'tooltip-box' );
+		expect( box ).not.toHaveClass( 'surface' );
+	} );
+
+	test( 'strips the surface from a bounded box when unstyled', async () => {
+		renderChart( { unstyled: true } );
+		const box = await screen.findByTestId( 'tooltip-box' );
+		expect( box ).not.toHaveClass( 'surface' );
+	} );
 
-		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( { boxShadow } );
+	test( 'keeps a caller class beside the surface on an unbounded box', async () => {
+		renderChart( { detectBounds: false, className: 'extra' } );
+		const box = await screen.findByTestId( 'tooltip-box' );
+		expect( box ).toHaveClass( 'surface', 'extra' );
 	} );
 
 	test( 'renders the tooltip box inside the chart wrapper, not in a body-level portal', async () => {
@@ -351,25 +366,23 @@ describe( 'XyChartTooltip', () => {
 	} );
 
 	test.each( [ 'auto', 'below-axis' ] as const )(
-		'preserves %s background and stacking with a partial style override',
+		'keeps the %s surface and stacking under a partial style override',
 		async tooltipPlacement => {
-			const { unmount } = renderChart( { tooltipPlacement } );
-			const defaultBox = await screen.findByTestId( 'tooltip-box' );
-			const background = defaultBox.style.backgroundColor;
-			expect( background ).not.toBe( '' );
-			expect( background ).not.toBe( 'transparent' );
-			unmount();
-
 			renderChart( { tooltipPlacement, style: { color: 'red' } } );
-
-			await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( {
-				backgroundColor: background,
-				zIndex: '3',
-				color: 'rgb(255, 0, 0)',
-			} );
+			const box = await screen.findByTestId( 'tooltip-box' );
+			expect( box ).toHaveClass( 'surface' );
+			expect( box ).toHaveStyle( { zIndex: '3', color: 'rgb(255, 0, 0)' } );
 		}
 	);
 
+	test( 'lets a style override paint the box', async () => {
+		renderChart( { style: { background: 'rgb(0, 0, 0)', color: 'rgb(255, 255, 255)' } } );
+		await expect( screen.findByTestId( 'tooltip-box' ) ).resolves.toHaveStyle( {
+			background: 'rgb(0, 0, 0)',
+			color: 'rgb(255, 255, 255)',
+		} );
+	} );
+
 	test( 'accepts the portal-era options without passing them to the box', async () => {
 		renderChart( { scroll: true, debounce: 50, resizeObserverPolyfill: undefined } );
 

package/src/components/tooltip/xy-chart-tooltip.tsx

@@ -1,9 +1,12 @@
-import { Tooltip, defaultStyles } from '@visx/tooltip';
+import { Tooltip } from '@visx/tooltip';
 import { DataContext, TooltipContext } from '@visx/xychart';
+import clsx from 'clsx';
 import { useCallback, useContext, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { isValidHexColor } from '../../utils';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
+import styles from './base-tooltip.module.scss';
 import { BoundedTooltip, TOOLTIP_Z_INDEX } from './private/bounded-tooltip';
+import { TooltipTheme } from './private/tooltip-theme';
 import type {
 	CrosshairStyle,
 	RenderTooltipGlyphProps,
@@ -215,16 +218,29 @@ const XyChartTooltipContent = < Datum extends object >( {
 	const marginLeft = margin?.left ?? 0;
 
 	const TooltipComponent = detectBounds || tooltipPlacement !== 'auto' ? BoundedTooltip : Tooltip;
-	const boxStyle: CSSProperties = {
-		...defaultStyles,
-		zIndex,
-		backgroundColor: theme?.backgroundColor ?? 'white',
-		boxShadow: `0 1px 2px ${
-			isValidHexColor( theme?.htmlLabel?.color ) ? `${ theme.htmlLabel.color }55` : '#22222255'
-		}`,
-		...theme?.htmlLabel,
-		...style,
-	};
+	const boxStyle: CSSProperties = { zIndex, ...style };
+	// BoundedTooltip themes its own box.
+	const themesOwnBox = TooltipComponent === Tooltip && ! tooltipProps.unstyled;
+	const box = (
+		<TooltipComponent
+			left={ tooltipLeft }
+			top={
+				tooltipPlacement === 'below-axis'
+					? marginTop + innerHeight + ( margin?.bottom ?? 0 )
+					: ( tooltipAnchorTop ?? tooltipTop )
+			}
+			style={ boxStyle }
+			applyPositionStyle
+			{ ...tooltipProps }
+			className={ clsx(
+				themesOwnBox && [ CHART_SCOPE_CLASS, styles.surface ],
+				tooltipProps.className
+			) }
+			{ ...( tooltipPlacement !== 'auto' && { placement: tooltipPlacement } ) }
+		>
+			{ tooltipContent }
+		</TooltipComponent>
+	);
 
 	return (
 		<>
@@ -258,23 +274,7 @@ const XyChartTooltipContent = < Datum extends object >( {
 				{ glyphs }
 			</g>
 			{ container &&
-				createPortal(
-					<TooltipComponent
-						left={ tooltipLeft }
-						top={
-							tooltipPlacement === 'below-axis'
-								? marginTop + innerHeight + ( margin?.bottom ?? 0 )
-								: ( tooltipAnchorTop ?? tooltipTop )
-						}
-						style={ boxStyle }
-						applyPositionStyle
-						{ ...tooltipProps }
-						{ ...( tooltipPlacement !== 'auto' && { placement: tooltipPlacement } ) }
-					>
-						{ tooltipContent }
-					</TooltipComponent>,
-					container
-				) }
+				createPortal( themesOwnBox ? <TooltipTheme>{ box }</TooltipTheme> : box, container ) }
 		</>
 	);
 };

package/src/components/trend-indicator/trend-indicator.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import styles from './trend-indicator.module.scss';
 import type { TrendIndicatorProps, TrendDirection } from './types';
+import type { JSX } from 'react';
 
 const DIRECTION_LABELS: Record< TrendDirection, string > = {
 	up: 'Increase',

package/src/hooks/index.ts

@@ -9,3 +9,4 @@ export { useZeroValueDisplay } from './use-zero-value-display';
 export { useDataWithPercentages } from './use-data-with-percentages';
 export { useLegendVisibilityData } from './use-legend-visibility-data';
 export { usePrefersReducedMotion } from './use-prefers-reduced-motion';
+export { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';

package/src/hooks/test/use-xychart-theme.test.tsx

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
 import { ChartScopeContext } from '../../providers/chart-scope';
 import { useXYChartTheme } from '../use-xychart-theme';
 import type { ReactNode } from 'react';
@@ -48,8 +49,7 @@ describe( 'useXYChartTheme', () => {
 		document.body.removeChild( scope );
 	} );
 
-	// The one label color that has to arrive resolved: visx paints it on a portal container appended to `document.body`, where the catalog is not declared, and concatenates it into `box-shadow: 0 1px 2px ${color}55`, which a `var()` chain would invalidate.
-	it( 'resolves the tooltip label color while the tick labels keep the pointer', () => {
+	it( 'hands visx the label pointer for the HTML label, even with an override in scope', () => {
 		const scope = document.createElement( 'div' );
 		scope.style.setProperty( '--a8c-charts-color-label-axis', '#0000ff' );
 		document.body.appendChild( scope );
@@ -60,7 +60,7 @@ describe( 'useXYChartTheme', () => {
 
 		const { result } = renderHook( () => useXYChartTheme( [] ), { wrapper } );
 
-		expect( result.current.htmlLabel.color ).toBe( '#0000ff' );
+		expect( result.current.htmlLabel.color ).toBe( CATALOG_POINTERS.labelAxis );
 		expect( result.current.svgLabelSmall.fill ).toBe(
 			'var(--a8c-charts-color-label-axis, #1e1e1e)'
 		);

package/src/hooks/use-isomorphic-layout-effect.ts

@@ -0,0 +1,5 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+// useLayoutEffect on the client, useEffect on the server to avoid React's SSR warning.
+export const useIsomorphicLayoutEffect =
+	typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/src/hooks/use-xychart-theme.ts

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { useGlobalChartsTheme } from '../providers';
 import { CATALOG_POINTERS } from '../providers/chart-context/private/catalog-pointers';
 import { useChartScopeElement } from '../providers/chart-scope';
-import { createCssVariableResolver, normalizeColorToHex } from '../utils';
+import { createCssVariableResolver } from '../utils';
 import type { SeriesData } from '../types';
 
 export const useXYChartTheme = ( data: SeriesData[] ) => {
@@ -18,9 +18,9 @@ export const useXYChartTheme = ( data: SeriesData[] ) => {
 	);
 
 	return useMemo( () => {
-		// Only what is read as a string is resolved: the palette, `backgroundColor`, `htmlLabel.color`.
+		// Only what is read as a string is resolved: the palette and `backgroundColor`.
 		// At the chart's scope element, never :root, so an override inside the provider tree is seen.
-		// One resolver for all three, so they share a single getComputedStyle call.
+		// One resolver for both, so they share a single getComputedStyle call.
 		const resolve = createCssVariableResolver( scopeElement );
 		const resolveColor = ( value?: string ): string | undefined =>
 			value ? ( resolve( value ) ?? value ) : value;
@@ -33,14 +33,6 @@ export const useXYChartTheme = ( data: SeriesData[] ) => {
 			.map( color => resolveColor( color ) )
 			.filter( ( color ): color is string => Boolean( color ) && ! color.includes( 'var(' ) );
 
-		// The tooltip is painted in a portal outside the scope, and visx concatenates this color into a `box-shadow` where a chain cannot take a suffix; see TOKENS.md#the-svg-bridge. Passing it explicitly leaves `svgLabelSmall.fill`, which visx derives it from, a chain for the SVG tick labels.
-		// Hex specifically: that concatenation appends `55`, which only yields a color
-		// after a 6-digit hex. An `rgb()` computed value takes the whole shadow down.
-		const resolvedLabelColor = resolveColor( CATALOG_POINTERS.labelAxis );
-		const htmlLabelColor = resolvedLabelColor
-			? normalizeColorToHex( resolvedLabelColor ) || resolvedLabelColor
-			: resolvedLabelColor;
-
 		// visx's fallbacks for whichever axis or grid style object it is not given. All four are
 		// supplied, so these reach nothing; they stay because the config type requires them.
 		return buildChartTheme( {
@@ -49,7 +41,7 @@ export const useXYChartTheme = ( data: SeriesData[] ) => {
 			gridColorDark: '',
 			colors: paletteColors,
 			backgroundColor: resolveColor( CATALOG_POINTERS.background ),
-			htmlLabel: htmlLabelColor ? { color: htmlLabelColor } : undefined,
+			htmlLabel: { color: CATALOG_POINTERS.labelAxis },
 			gridStyles: { ...theme.gridStyles, stroke: CATALOG_POINTERS.grid },
 			xAxisLineStyles: { ...theme.xAxisLineStyles, stroke: CATALOG_POINTERS.axisX },
 			xTickLineStyles: { ...theme.xTickLineStyles, stroke: CATALOG_POINTERS.tickX },

package/src/index.ts

@@ -82,7 +82,13 @@ export type {
 	PieSemiCircleChartProps,
 	PieSemiCircleChartRenderTooltipParams,
 } from './charts/pie-semi-circle-chart';
-export type { GeoChartProps, GeoRegion, GeoResolution, GeoChartError } from './charts/geo-chart';
+export type {
+	GeoChartProps,
+	GeoRegion,
+	GeoResolution,
+	GeoDisplayMode,
+	GeoChartError,
+} from './charts/geo-chart';
 export type { LegendValueDisplay, BaseLegendItem } from './components/legend';
 export type { TrendIndicatorProps, TrendDirection } from './components/trend-indicator';
 export type { LineStyles, GridStyles, EventHandlerParams } from '@visx/xychart';

package/src/providers/chart-context/hooks/use-default-hidden-series.ts

@@ -1,9 +1,7 @@
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../../../hooks';
 import { useGlobalChartsContext } from './use-global-charts-context';
 
-// Hide seeded series before paint without triggering React's SSR warning.
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
 /**
  * Seeds a chart's hidden series once per chart ID, the first time the provider
  * sees that ID.

package/src/providers/chart-context/private/perceptual-color.ts

@@ -2,6 +2,9 @@ import { relativeLuminance, validateHexColor } from '../../../utils';
 
 export type Lab = readonly [ number, number, number ];
 
+/** sRGB channels from 0 to 255, left unrounded. */
+export type Rgb = readonly [ number, number, number ];
+
 /** A color as seen in normal vision, then under deuteranopia and protanopia. */
 export type ColorViews = readonly [ Lab, Lab, Lab ];
 
@@ -23,13 +26,22 @@ const toLinear = ( channel: number ): number =>
 const fromLinear = ( channel: number ): number =>
 	channel <= 0.0031308 ? 12.92 * channel : 1.055 * Math.pow( channel, 1 / 2.4 ) - 0.055;
 
-const hexToLinear = ( hex: string ): number[] => {
+/**
+ * The sRGB channels of a hex color.
+ *
+ * @param  hex - A six-digit hex color.
+ * @return Channels from 0 to 255.
+ * @throws {Error} if the hex string is malformed
+ */
+export const hexToRgb = ( hex: string ): Rgb => {
 	validateHexColor( hex );
-	return [ 1, 3, 5 ].map( start =>
-		toLinear( parseInt( hex.slice( start, start + 2 ), 16 ) / 255 )
-	);
+	const [ r, g, b ] = [ 1, 3, 5 ].map( start => parseInt( hex.slice( start, start + 2 ), 16 ) );
+	return [ r, g, b ];
 };
 
+const hexToLinear = ( hex: string ): number[] =>
+	hexToRgb( hex ).map( channel => toLinear( channel / 255 ) );
+
 const linearToHex = ( linear: number[] ): string =>
 	'#' +
 	linear
@@ -197,6 +209,35 @@ export const hexToOklch = ( hex: string ): { chroma: number; hue: number } => {
 	};
 };
 
+/**
+ * `foreground` over `background` at `weight`, left unrounded as CSS `color-mix` and alpha compositing leave it.
+ *
+ * A mix rounded to hex can land on the other side of a contrast threshold from the fill the browser paints.
+ *
+ * @param foreground - The color weighted by `weight`.
+ * @param background - The color it is mixed over.
+ * @param weight     - Share of `foreground`, from 0 to 1.
+ * @return The mixed channels.
+ */
+export const blendRgb = ( foreground: Rgb, background: Rgb, weight: number ): Rgb => {
+	const share = Math.min( 1, Math.max( 0, weight ) );
+	const [ r, g, b ] = foreground.map(
+		( channel, i ) => background[ i ] + ( channel - background[ i ] ) * share
+	);
+	return [ r, g, b ];
+};
+
+/**
+ * WCAG relative luminance of unrounded sRGB channels.
+ *
+ * @param rgb - Channels from 0 to 255.
+ * @return Relative luminance from 0 to 1.
+ */
+export const rgbLuminance = ( rgb: Rgb ): number => {
+	const [ r, g, b ] = rgb.map( channel => toLinear( channel / 255 ) );
+	return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+
 /**
  * WCAG contrast ratio between two relative luminances.
  *

package/src/providers/chart-context/test/perceptual-color.test.ts

@@ -3,6 +3,9 @@ import {
 	deltaE2000,
 	hexToOklch,
 	hexToViews,
+	blendRgb,
+	hexToRgb,
+	rgbLuminance,
 	oklchToHex,
 	viewDistance,
 } from '../private/perceptual-color';
@@ -73,3 +76,31 @@ describe( 'contrastRatio', () => {
 		expect( contrastRatio( '#3858e9', '#3858e9' ) ).toBe( 1 );
 	} );
 } );
+
+describe( 'hexToRgb', () => {
+	it( 'reads each channel', () => {
+		expect( hexToRgb( '#3858e9' ) ).toEqual( [ 56, 88, 233 ] );
+	} );
+} );
+
+describe( 'blendRgb', () => {
+	const blue = hexToRgb( '#3858e9' );
+	const white = hexToRgb( '#ffffff' );
+
+	it( 'matches each endpoint at full weight', () => {
+		expect( blendRgb( blue, white, 1 ) ).toEqual( [ 56, 88, 233 ] );
+		expect( blendRgb( blue, white, 0 ) ).toEqual( [ 255, 255, 255 ] );
+	} );
+
+	it( 'does not round the mix to a hex channel', () => {
+		expect( blendRgb( hexToRgb( '#000000' ), white, 0.5 ) ).toEqual( [ 127.5, 127.5, 127.5 ] );
+	} );
+} );
+
+describe( 'rgbLuminance', () => {
+	it( 'reads unrounded channels', () => {
+		// Rounded to #808080 this would read 0.2159.
+		expect( rgbLuminance( [ 127.5, 127.5, 127.5 ] ) ).toBeCloseTo( 0.214, 4 );
+		expect( rgbLuminance( [ 56, 88, 233 ] ) ).toBeCloseTo( 0.137, 4 );
+	} );
+} );

package/src/styles/chart-scope-class.ts

@@ -4,3 +4,8 @@
  * Deliberately unhashed: consumers are documented as being able to target it to override a token on the provider element.
  */
 export const CHART_SCOPE_CLASS = 'a8c-charts-scope';
+
+/**
+ * Carries the catalog on the tooltip box, re-declared under the tooltip's own theme. Separate from `CHART_SCOPE_CLASS` so a page-wide override on that class does not reach the dark box.
+ */
+export const TOOLTIP_SCOPE_CLASS = 'a8c-charts-tooltip-scope';

package/src/styles/chart-scope.scss

@@ -10,7 +10,9 @@
 // the same element wins. Chart roots deliberately do NOT re-declare these: an
 // element's own declaration beats an inherited one, so re-declaring lower down
 // would shadow a consumer override set inside the provider tree.
-:where(.a8c-charts-scope) {
+// The tooltip box re-declares the catalog under its own class, so a rule on
+// .a8c-charts-scope does not land on the dark box.
+:where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
 	// The series palette. GlobalChartsProvider resolves these five slots at its
 	// wrapper and seeds ColorCache with whatever resolves; a slot that resolves
 	// to nothing is skipped, so setting only slots 1 and 3 gives a two-color
@@ -49,14 +51,15 @@
 	--a8c-charts-color-trend-down: var(--wpds-color-foreground-content-error-weak);
 	--a8c-charts-color-trend-neutral: var(--wpds-color-foreground-content-neutral-weak);
 	--a8c-charts-color-background: var(--wpds-color-background-surface-neutral-strong);
-	// Surfaces floating over the chart — tooltips, the annotation label, the
-	// zoom-reset control. Same WPDS token as --a8c-charts-color-background but
+	// Surfaces floating over the chart — the annotation label, the zoom-reset
+	// control. Same WPDS token as --a8c-charts-color-background but
 	// deliberately not derived from it, so either can move without the other.
 	--a8c-charts-color-surface: var(--wpds-color-background-surface-neutral-strong);
 	--a8c-charts-color-surface-secondary: var(--wpds-color-background-surface-neutral-weak);
 	--a8c-charts-color-track: var(--wpds-color-background-track-neutral-weak);
-	// Translucent dark surface; no WPDS token carries this.
-	--a8c-charts-color-tooltip-surface: rgb(0 0 0 / 85%);
+	// The background @wordpress/ui's Tooltip themes its popup with; WPDS has
+	// no inverted surface token yet.
+	--a8c-charts-color-tooltip-surface: #1e1e1e;
 	--a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong);
 	--a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand);
 
@@ -87,7 +90,7 @@
 
 @media (forced-colors: active) {
 
-	:where(.a8c-charts-scope) {
+	:where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
 		--a8c-charts-color-label-axis: CanvasText;
 		--a8c-charts-color-grid: GrayText;
 		--a8c-charts-color-axis-x: GrayText;

package/src/styles/test/chart-scope.test.ts

@@ -127,7 +127,7 @@ describe( 'chart scope catalog', () => {
 			expect( mediaRules[ 0 ].cssRules ).toHaveLength( 1 );
 
 			const rule = mediaRules[ 0 ].cssRules[ 0 ] as CSSStyleRule;
-			expect( rule.selectorText ).toBe( ':where(.a8c-charts-scope)' );
+			expect( rule.selectorText ).toBe( ':where(.a8c-charts-scope, .a8c-charts-tooltip-scope)' );
 			expect(
 				Object.fromEntries(
 					Array.from( rule.style ).map( property => [
@@ -171,8 +171,8 @@ describe( 'chart scope catalog', () => {
 		expect( documented.get( token )?.fallback ).toEqual( declared.get( token )?.fallback );
 	} );
 
-	it( 'scopes the catalog to :where(.a8c-charts-scope) rather than :root', () => {
-		expect( stylesheet ).toMatch( /:where\(\.a8c-charts-scope\)\s*{/ );
+	it( 'scopes the catalog to the chart and tooltip scope classes rather than :root', () => {
+		expect( stylesheet ).toMatch( /:where\(\.a8c-charts-scope, \.a8c-charts-tooltip-scope\)\s*{/ );
 		expect( stylesheet ).not.toMatch( /(^|\s):root\s*{/ );
 	} );
 

package/src/utils/color-utils.ts

@@ -262,7 +262,8 @@ export const relativeLuminance = ( hex: string ): number => {
  * Whether light text reads better than dark text on the given background, using the W3C
  * luminance threshold (0.179) that maximizes contrast against black vs white.
  *
- * @param backgroundHex - Hex background color
+ * @deprecated Assumes black and white text, so it ignores label role overrides and cannot guarantee AA; charts no longer use it, and it will be removed in a future major version.
+ * @param      backgroundHex - Hex background color
  * @return true if light text should be used; false (dark text) for malformed colors
  */
 export const prefersLightText = ( backgroundHex: string ): boolean => {

package/src/visx/types.ts

@@ -33,7 +33,7 @@ export type XyChartTooltipProps< Datum extends object > = {
 	tooltipPlacement?: TooltipPlacement;
 	/** Override the tooltip top anchor in SVG coordinates, including negative offsets. */
 	tooltipAnchorTop?: number;
-	/** Merge overrides with the default box styles; use `unstyled` to strip the box styling. */
+	/** Inline overrides on the tooltip surface; `unstyled` drops both. */
 	style?: VisxTooltipProps[ 'style' ];
 	snapTooltipToDatumX?: boolean;
 	snapTooltipToDatumY?: boolean;

package/src/charts/line-chart/test/crosshair-style-types.test.ts

@@ -1,31 +0,0 @@
-import type { LineChartProps } from '../types';
-
-type Crosshairs = NonNullable< LineChartProps[ 'withTooltipCrosshairs' ] >;
-
-describe( 'line chart crosshair style types', () => {
-	test( 'accepts paint attributes', () => {
-		const crosshairs: Crosshairs = { verticalStyle: { stroke: 'purple', strokeWidth: 2 } };
-
-		expect( crosshairs.verticalStyle?.stroke ).toBe( 'purple' );
-	} );
-
-	test( 'reserves geometry attributes for the chart', () => {
-		const crosshairs: Crosshairs = {
-			// @ts-expect-error Crosshair coordinates are computed from the active datum.
-			verticalStyle: { x1: 12 },
-		};
-
-		const transformedCrosshairs: Crosshairs = {
-			// @ts-expect-error Crosshair transforms are not paint attributes.
-			verticalStyle: { transform: 'translate(100 0)' },
-		};
-		const transformedStyles: Crosshairs = {
-			// @ts-expect-error Inline crosshair styles accept only paint properties.
-			horizontalStyle: { style: { transform: 'translateX(100px)' } },
-		};
-
-		expect( crosshairs ).toBeDefined();
-		expect( transformedCrosshairs ).toBeDefined();
-		expect( transformedStyles ).toBeDefined();
-	} );
-} );