@automattic/charts 4.5.0 → 4.7.0

package/src/charts/private/test/label-text-color.test.ts

@@ -0,0 +1,191 @@
+import { MIN_LABEL_CONTRAST } from '../../../providers/chart-context/private/palette-generator';
+import {
+	blendRgb,
+	hexToRgb,
+	luminanceContrastRatio,
+	rgbLuminance,
+} from '../../../providers/chart-context/private/perceptual-color';
+import {
+	pickLabelTextColor,
+	pickLabelTextColorForFill,
+	resolveLabelRoles,
+} from '../label-text-color';
+import type { Rgb } from '../../../providers/chart-context/private/perceptual-color';
+import type { LabelRoles, LabelTextColor, ResolvedRole } from '../label-text-color';
+
+const color = ( hex: string, alpha = 1 ): ResolvedRole => ( {
+	kind: 'color',
+	rgb: hexToRgb( hex ),
+	alpha,
+} );
+
+const unreadable = ( raw: string | null ): ResolvedRole => ( { kind: 'unreadable', raw } );
+
+const DEFAULT_ROLES: LabelRoles = { label: color( '#1e1e1e' ), labelInverse: color( '#f0f0f0' ) };
+
+const WHITE = hexToRgb( '#ffffff' );
+const MID_BLUE = hexToRgb( '#3858e9' );
+
+describe( 'resolveLabelRoles', () => {
+	const resolverFor =
+		( label: string | null, labelInverse: string | null ) =>
+		( value: string ): string | null =>
+			value.includes( '--a8c-charts-color-label-inverse' ) ? labelInverse : label;
+
+	it( 'resolves opaque roles in any syntax d3 reads', () => {
+		expect( resolveLabelRoles( resolverFor( '#1E1E1E', 'rgb(240, 240, 240)' ) ) ).toEqual(
+			DEFAULT_ROLES
+		);
+	} );
+
+	it( "keeps a role's alpha", () => {
+		expect( resolveLabelRoles( resolverFor( 'rgba(30, 30, 30, 0.87)', '#f0f0f0' ) ).label ).toEqual(
+			color( '#1e1e1e', 0.87 )
+		);
+	} );
+
+	it( 'reads transparent as a role with no alpha', () => {
+		expect( resolveLabelRoles( resolverFor( 'transparent', '#f0f0f0' ) ).label ).toEqual(
+			color( '#000000', 0 )
+		);
+	} );
+
+	it( 'keeps the raw value of a role it cannot read', () => {
+		expect( resolveLabelRoles( resolverFor( null, 'oklch(98% 0 0)' ) ) ).toEqual( {
+			label: unreadable( null ),
+			labelInverse: unreadable( 'oklch(98% 0 0)' ),
+		} );
+	} );
+} );
+
+describe( 'pickLabelTextColorForFill', () => {
+	it( 'keeps the default role before the roles are read', () => {
+		expect( pickLabelTextColorForFill( MID_BLUE, null, 'label' ) ).toBe( 'label' );
+		expect( pickLabelTextColorForFill( MID_BLUE, null, 'label-inverse' ) ).toBe( 'label-inverse' );
+	} );
+
+	it( 'picks the role that contrasts more when it reaches AA', () => {
+		expect( pickLabelTextColorForFill( WHITE, DEFAULT_ROLES, 'label-inverse' ) ).toBe( 'label' );
+		expect( pickLabelTextColorForFill( MID_BLUE, DEFAULT_ROLES, 'label' ) ).toBe( 'label-inverse' );
+	} );
+
+	it( 'falls back to black or white when neither role reaches AA', () => {
+		expect( pickLabelTextColorForFill( hexToRgb( '#516dec' ), DEFAULT_ROLES, 'label' ) ).toBe(
+			'black'
+		);
+		expect( pickLabelTextColorForFill( hexToRgb( '#4663ea' ), DEFAULT_ROLES, 'label' ) ).toBe(
+			'white'
+		);
+	} );
+
+	it( 'measures a translucent role as it paints over the fill', () => {
+		// Opaque, this label would read 16:1 on white; at 30% it paints a pale gray that fails AA.
+		const faintLabel: LabelRoles = {
+			label: color( '#1e1e1e', 0.3 ),
+			labelInverse: color( '#f0f0f0' ),
+		};
+
+		expect( pickLabelTextColorForFill( WHITE, faintLabel, 'label-inverse' ) ).toBe( 'black' );
+	} );
+
+	it( 'never picks a fully transparent role', () => {
+		const clearLabel: LabelRoles = {
+			label: color( '#000000', 0 ),
+			labelInverse: color( '#f0f0f0' ),
+		};
+
+		expect( pickLabelTextColorForFill( WHITE, clearLabel, 'label' ) ).toBe( 'black' );
+	} );
+
+	it( 'treats two different translucent roles as two colors', () => {
+		const translucent: LabelRoles = {
+			label: color( '#000000', 0.87 ),
+			labelInverse: color( '#ffffff', 0.9 ),
+		};
+
+		expect( pickLabelTextColorForFill( MID_BLUE, translucent, 'label' ) ).toBe( 'label-inverse' );
+	} );
+
+	it( 'uses a readable role when the other cannot be read, else black or white', () => {
+		const unreadableInverse: LabelRoles = {
+			label: color( '#1e1e1e' ),
+			labelInverse: unreadable( 'rgb(255 255 255)' ),
+		};
+
+		expect( pickLabelTextColorForFill( WHITE, unreadableInverse, 'label-inverse' ) ).toBe(
+			'label'
+		);
+		expect( pickLabelTextColorForFill( MID_BLUE, unreadableInverse, 'label' ) ).toBe( 'white' );
+	} );
+
+	it.each( [
+		[ 'readable', color( '#767676' ) ],
+		[ 'unreadable', unreadable( 'oklch(55% 0 0)' ) ],
+	] )( 'never falls back when both roles are the same %s color', ( _name, role ) => {
+		const pinned: LabelRoles = { label: role, labelInverse: { ...role } };
+
+		expect( pickLabelTextColorForFill( hexToRgb( '#516dec' ), pinned, 'label' ) ).toBe( 'label' );
+		expect( pickLabelTextColorForFill( hexToRgb( '#516dec' ), pinned, 'label-inverse' ) ).toBe(
+			'label-inverse'
+		);
+	} );
+
+	describe.each( [
+		[ 'white', '#ffffff' ],
+		[ 'dark', '#1e1e1e' ],
+	] )( 'across a heatmap scale on a %s background', ( _name, background ) => {
+		const painted: Record< LabelTextColor, number > = {
+			label: rgbLuminance( hexToRgb( '#1e1e1e' ) ),
+			'label-inverse': rgbLuminance( hexToRgb( '#f0f0f0' ) ),
+			black: 0,
+			white: 1,
+		};
+		// The Storybook custom accent, then the wp-admin scheme colors.
+		const primaries = [
+			'#4a19ab',
+			'#2271b1',
+			'#007cba',
+			'#3858e9',
+			'#437aa8',
+			'#916745',
+			'#646c3e',
+			'#cf4339',
+			'#567958',
+			'#ad631e',
+		];
+
+		it.each( primaries )( 'reaches AA on every intensity of %s', primary => {
+			for ( let step = 0; step <= 200; step++ ) {
+				const fill = blendRgb(
+					hexToRgb( primary ),
+					hexToRgb( background ),
+					0.15 + 0.85 * ( step / 200 )
+				);
+				const choice = pickLabelTextColorForFill( fill, DEFAULT_ROLES, 'label' );
+				// Checked on the 8-bit channels the browser paints as well as the exact mix.
+				const [ r, g, b ] = fill.map( Math.round );
+				const painted8Bit: Rgb = [ r, g, b ];
+
+				for ( const shown of [ fill, painted8Bit ] ) {
+					expect(
+						luminanceContrastRatio( rgbLuminance( shown ), painted[ choice ] )
+					).toBeGreaterThanOrEqual( MIN_LABEL_CONTRAST );
+				}
+			}
+		} );
+	} );
+} );
+
+describe( 'pickLabelTextColor', () => {
+	it( 'reads the fill from any color syntax', () => {
+		expect( pickLabelTextColor( 'rgb(255, 255, 255)', DEFAULT_ROLES, 'label-inverse' ) ).toBe(
+			'label'
+		);
+	} );
+
+	it( 'keeps the default role for a fill it cannot read', () => {
+		expect( pickLabelTextColor( 'var(--not-set)', DEFAULT_ROLES, 'label-inverse' ) ).toBe(
+			'label-inverse'
+		);
+	} );
+} );

package/src/charts/private/with-responsive/test/with-responsive.test.tsx

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import { ChartScopeContext } from '../../../../providers/chart-scope';
 import { withResponsive } from '../index';
 import type { BaseChartProps } from '../../../../types';
+import type { JSX } from 'react';
 
 // Mock the useParentSize hook
 jest.mock( '@visx/responsive', () => ( {

package/src/charts/private/with-responsive/with-responsive.tsx

@@ -1,6 +1,7 @@
 import { useParentSize } from '@visx/responsive';
 import clsx from 'clsx';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../../../hooks';
 import { ChartScopeContext } from '../../../providers/chart-scope';
 import styles from './with-responsive.module.scss';
 import type { BaseChartProps } from '../../../types';
@@ -33,10 +34,6 @@ export type ResponsiveConfig = {
 	resizeDebounceTime?: number;
 };
 
-// useLayoutEffect on the client (so containment is resolved before paint, no flash),
-// useEffect on the server to avoid React's SSR warning.
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
 /**
  * A higher-order component that provides responsive dimensions
  * to the wrapped chart component using useParentSize from `@visx/responsive`.

package/src/components/tooltip/accessible-tooltip.tsx

@@ -19,7 +19,7 @@ export type FlattenedTooltipData = {
 	dataPointIndex: number;
 };
 
-// Enhanced tooltip with keyboard navigation and accessibility
+// The XY chart tooltip, as LineChart, AreaChart and BarChart render it: place it inside a visx `XYChart`, with `useKeyboardNavigation` for keyboard access.
 interface AccessibleTooltipProps extends Omit<
 	XyChartTooltipProps< DataPointDate >,
 	'renderTooltip'

package/src/components/tooltip/base-tooltip.module.scss

@@ -1,17 +1,21 @@
 // `.surface` is the look alone, for a chart that positions the box itself.
+// The box carries the chart scope class inside TooltipTheme, so these roles
+// resolve for the dark tooltip theme, as in @wordpress/ui's Tooltip popup.
 .surface,
 .tooltip {
-	padding: var(--wpds-dimension-padding-sm);
-	// No WPDS token fits a translucent dark tooltip surface:
-	// bg-interactive-neutral-strong is opaque, and there is no
-	// white-on-dark content foreground token. The role carries the
-	// hardcoded translucent value as its fallback.
-	background-color: var(--a8c-charts-color-tooltip-surface, rgba(0, 0, 0, 0.85));
-	color: #fff;
+	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
+	background-color: var(--a8c-charts-color-surface);
+	color: var(--a8c-charts-color-label);
 	border-radius: var(--wpds-border-radius-md);
-	font-size: var(--wpds-typography-font-size-md);
+	font-family: var(--wpds-typography-font-family-body);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: 1.4;
 	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);
 	pointer-events: none;
+
+	@media (forced-colors: active) {
+		border: var(--wpds-border-width-xs) solid CanvasText;
+	}
 }
 
 .tooltip {

package/src/components/tooltip/base-tooltip.tsx

@@ -1,7 +1,8 @@
 import { formatNumber } from '@automattic/number-formatters';
 import clsx from 'clsx';
-import { useStandaloneScopeClass } from '../../providers/chart-scope';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import styles from './base-tooltip.module.scss';
+import { TooltipTheme } from './private/tooltip-theme';
 import type { CSSProperties, ComponentType, ReactNode } from 'react';
 
 type TooltipData = {
@@ -59,20 +60,21 @@ export const BaseTooltip = ( {
 	renderContainer = true,
 }: BaseTooltipProps ) => {
 	const content = children || ( data && <Component data={ data } className={ className } /> );
-	const standaloneScopeClass = useStandaloneScopeClass();
 
 	if ( ! renderContainer ) {
 		return content;
 	}
 
 	return (
-		<div
-			className={ clsx( standaloneScopeClass, styles.tooltip ) }
-			style={ { top, left, ...style } }
-			role="tooltip"
-		>
-			{ content }
-		</div>
+		<TooltipTheme>
+			<div
+				className={ clsx( CHART_SCOPE_CLASS, styles.tooltip ) }
+				style={ { top, left, ...style } }
+				role="tooltip"
+			>
+				{ content }
+			</div>
+		</TooltipTheme>
 	);
 };
 

package/src/components/tooltip/private/bounded-tooltip.tsx

@@ -1,5 +1,9 @@
-import { Tooltip, defaultStyles } from '@visx/tooltip';
+import { Tooltip } from '@visx/tooltip';
+import clsx from 'clsx';
 import { useLayoutEffect, useRef, useState } from 'react';
+import { TOOLTIP_SCOPE_CLASS } from '../../../styles/chart-scope-class';
+import styles from '../base-tooltip.module.scss';
+import { TooltipTheme } from './tooltip-theme';
 import type { TooltipPlacement } from '../../../visx/types';
 import type { TooltipProps } from '@visx/tooltip';
 
@@ -27,6 +31,15 @@ const isClipping = ( element: Element ) => {
 	return [ overflow, overflowX, overflowY ].some( value => value && value !== 'visible' );
 };
 
+// The positioned wrapper the box renders into, past the tooltip theme's `display: contents` element, which has no box to measure.
+const findLayoutParent = ( node: Element ): Element | null => {
+	let element = node.parentElement;
+	while ( element && getComputedStyle( element ).display === 'contents' ) {
+		element = element.parentElement;
+	}
+	return element;
+};
+
 // The first ancestor that cuts its overflow off. The box may leave the chart
 // wrapper but never this element, which is what a body-level portal used to
 // guarantee by never being inside one.
@@ -136,8 +149,9 @@ export const getBoundedPosition = ( {
  * @param props.top        - Anchor y, in wrapper coordinates.
  * @param props.offsetLeft - Gap between the anchor and the box, horizontally.
  * @param props.offsetTop  - Gap between the anchor and the box, vertically.
- * @param props.style      - Box styles; visx's defaults unless `unstyled`.
- * @param props.unstyled   - Skip `style` and leave the box bare.
+ * @param props.style      - Inline overrides on the surface; ignored when `unstyled`.
+ * @param props.unstyled   - Drop the surface and `style`, leaving the box bare.
+ * @param props.className  - Extra classes beside the surface.
  * @param props.children   - Box content.
  * @param props.placement  - Below-axis, beside without vertical flipping, or automatic flipping.
  * @return The tooltip box.
@@ -147,8 +161,9 @@ export const BoundedTooltip = ( {
 	top = 0,
 	offsetLeft = DEFAULT_OFFSET,
 	offsetTop = DEFAULT_OFFSET,
-	style = defaultStyles,
+	style,
 	unstyled = false,
+	className,
 	children,
 	placement = 'auto',
 	...rest
@@ -159,7 +174,7 @@ export const BoundedTooltip = ( {
 
 	useLayoutEffect( () => {
 		const node = nodeRef.current;
-		const wrapper = node?.parentElement;
+		const wrapper = node && findLayoutParent( node );
 		if ( ! node || ! wrapper ) {
 			return;
 		}
@@ -198,10 +213,11 @@ export const BoundedTooltip = ( {
 	const x = position?.x ?? left + offsetLeft;
 	const y = position?.y ?? top + ( placement === 'below-axis' ? POINTER_HEIGHT : offsetTop );
 
-	return (
+	const box = (
 		<Tooltip
 			ref={ nodeRef }
 			data-testid="bounded-tooltip"
+			className={ clsx( ! unstyled && [ TOOLTIP_SCOPE_CLASS, styles.surface ], className ) }
 			style={ {
 				position: 'absolute',
 				left: 0,
@@ -220,9 +236,10 @@ export const BoundedTooltip = ( {
 						left: left - x - POINTER_HEIGHT,
 						top: -POINTER_HEIGHT,
 						width: POINTER_HEIGHT * 2,
-						height: POINTER_HEIGHT,
+						// One extra pixel overlaps the box, so anti-aliasing leaves no seam between them.
+						height: POINTER_HEIGHT + 1,
 						background: 'inherit',
-						clipPath: 'polygon(50% 0, 100% 100%, 0 100%)',
+						clipPath: `polygon(50% 0, 100% ${ POINTER_HEIGHT }px, 100% 100%, 0 100%, 0 ${ POINTER_HEIGHT }px)`,
 						pointerEvents: 'none',
 					} }
 				/>
@@ -230,4 +247,6 @@ export const BoundedTooltip = ( {
 			{ children }
 		</Tooltip>
 	);
+
+	return unstyled ? box : <TooltipTheme>{ box }</TooltipTheme>;
 };

package/src/components/tooltip/private/tooltip-theme.tsx

@@ -0,0 +1,37 @@
+import { color as d3Color } from '@visx/vendor/d3-color';
+import { ThemeProvider } from '@wordpress/theme';
+import { useMemo } from 'react';
+import { useChartScopeElement } from '../../../providers/chart-scope';
+import { resolveCssVariable } from '../../../utils/resolve-css-var';
+import type { ReactNode } from 'react';
+
+const DEFAULT_SURFACE = '#1e1e1e';
+const TOOLTIP_SURFACE = `var(--a8c-charts-color-tooltip-surface, ${ DEFAULT_SURFACE })`;
+
+// `ThemeProvider` throws on a seed that is not an opaque sRGB color, which would unmount the chart.
+const toSeed = ( value: string | null ) => {
+	const parsed = value ? d3Color( value ) : null;
+	return parsed && parsed.opacity === 1 ? parsed.formatHex() : DEFAULT_SURFACE;
+};
+
+/**
+ * Themes the tooltip box for its dark surface, as `@wordpress/ui`'s Tooltip themes its popup. The box re-declares the catalog under this theme, so every role it reads is tuned for the surface, whatever theme the chart is in.
+ *
+ * @param props          - Component props.
+ * @param props.children - The tooltip box.
+ * @return The themed box.
+ */
+export const TooltipTheme = ( { children }: { children: ReactNode } ) => {
+	const scopeElement = useChartScopeElement();
+	const color = useMemo(
+		() => ( { background: toSeed( resolveCssVariable( TOOLTIP_SURFACE, scopeElement ) ) } ),
+		[ scopeElement ]
+	);
+
+	// Core's `wp-theme` in WordPress 7.0 exports only `privateApis`.
+	if ( ! ThemeProvider ) {
+		return <>{ children }</>;
+	}
+
+	return <ThemeProvider color={ color }>{ children }</ThemeProvider>;
+};

package/src/components/tooltip/test/bounded-tooltip.test.tsx

@@ -126,6 +126,87 @@ describe( 'BoundedTooltip', () => {
 		jest.restoreAllMocks();
 	} );
 
+	test( 'draws the package surface, not the visx default box', () => {
+		render(
+			<BoundedTooltip left={ 10 } top={ 10 } data-testid="box">
+				content
+			</BoundedTooltip>
+		);
+		const box = screen.getByTestId( 'box' );
+		expect( box ).toHaveClass( 'surface' );
+		expect( box ).not.toHaveStyle( { backgroundColor: 'white' } );
+		// toHaveStyle can't assert an absent inline style; box.style reads the empty string directly.
+		// eslint-disable-next-line jest-dom/prefer-to-have-style
+		expect( box.style.boxShadow ).toBe( '' );
+		// eslint-disable-next-line jest-dom/prefer-to-have-style
+		expect( box.style.padding ).toBe( '' );
+	} );
+
+	test( 'keeps a caller class beside the surface', () => {
+		render(
+			<BoundedTooltip left={ 10 } top={ 10 } className="extra" data-testid="box">
+				content
+			</BoundedTooltip>
+		);
+		expect( screen.getByTestId( 'box' ) ).toHaveClass( 'surface', 'extra' );
+	} );
+
+	test( 'drops the surface when unstyled', () => {
+		render(
+			<BoundedTooltip left={ 10 } top={ 10 } unstyled data-testid="box">
+				content
+			</BoundedTooltip>
+		);
+		expect( screen.getByTestId( 'box' ) ).not.toHaveClass( 'surface' );
+		expect( screen.getByTestId( 'box' ) ).not.toHaveClass( 'a8c-charts-tooltip-scope' );
+	} );
+
+	test( 're-declares the chart catalog on a styled box under its own class, out of reach of page-wide chart overrides', () => {
+		render(
+			<BoundedTooltip left={ 10 } top={ 10 } data-testid="box">
+				content
+			</BoundedTooltip>
+		);
+		const box = screen.getByTestId( 'box' );
+		expect( box ).toHaveClass( 'a8c-charts-tooltip-scope', 'surface' );
+		expect( box ).not.toHaveClass( 'a8c-charts-scope' );
+	} );
+
+	test( 'measures against the positioned wrapper past a display: contents element', () => {
+		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+			this: Element
+		) {
+			if ( this.classList.contains( 'visx-tooltip' ) ) {
+				return rect( 0, 0, 208, 36 );
+			}
+			return this.getAttribute( 'data-testid' ) === 'contents'
+				? rect( 0, 0, 0, 0 )
+				: rect( 0, 0, 600, 200 );
+		} );
+
+		render(
+			<div style={ { position: 'relative', overflow: 'hidden' } }>
+				<div data-testid="contents" style={ { display: 'contents' } }>
+					<BoundedTooltip left={ 300 } top={ 50 } unstyled data-testid="box">
+						content
+					</BoundedTooltip>
+				</div>
+			</div>
+		);
+
+		// Measured against the zero-size contents element, the box would flip to (82, 4).
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { transform: 'translate(310px, 60px)' } );
+	} );
+
+	test( 'lets an inline style override the surface', () => {
+		render(
+			<BoundedTooltip left={ 10 } top={ 10 } style={ { background: 'red' } } data-testid="box">
+				content
+			</BoundedTooltip>
+		);
+		expect( screen.getByTestId( 'box' ) ).toHaveStyle( { background: 'red' } );
+	} );
+
 	test( 'keeps the box inside an overflow-hidden ancestor that is wider than the wrapper', () => {
 		// Card at x=400 (400 wide, overflow hidden); plot wrapper at x=440, 346 wide.
 		jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
@@ -209,7 +290,7 @@ describe( 'BoundedTooltip', () => {
 				left: `${ pointerLeft }px`,
 				top: '-6px',
 				width: '12px',
-				height: '6px',
+				height: '7px',
 			} );
 			expect( screen.getByTestId( 'tooltip-axis-pointer' ) ).toHaveAttribute(
 				'aria-hidden',

package/src/components/tooltip/test/tool-tip.test.tsx

@@ -36,6 +36,11 @@ describe( 'BaseTooltip', () => {
 		} );
 	} );
 
+	test( 'renders the standalone container on the tooltip chrome', () => {
+		render( <BaseTooltip { ...defaultProps } /> );
+		expect( screen.getByRole( 'tooltip' ) ).toHaveClass( 'tooltip' );
+	} );
+
 	test( 'handles missing valueDisplay', () => {
 		const propsWithoutDisplay = {
 			...defaultProps,

package/src/components/tooltip/test/tooltip-theme.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import { resolveCssVariable } from '../../../utils/resolve-css-var';
+import { TooltipTheme } from '../private/tooltip-theme';
+
+jest.mock( '@wordpress/theme', () => ( { ...jest.requireActual( '@wordpress/theme' ) } ) );
+jest.mock( '../../../utils/resolve-css-var', () => ( { resolveCssVariable: jest.fn() } ) );
+
+const theme = jest.requireMock( '@wordpress/theme' );
+const { ThemeProvider } = jest.requireActual( '@wordpress/theme' );
+
+const spyOnThemeProvider = () =>
+	jest.spyOn( theme, 'ThemeProvider' ).mockImplementation( ( { children } ) => children );
+
+describe( 'TooltipTheme', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+		theme.ThemeProvider = ThemeProvider;
+	} );
+
+	test( 'renders the box unthemed when core exports no public ThemeProvider', () => {
+		theme.ThemeProvider = undefined;
+		jest.mocked( resolveCssVariable ).mockReturnValue( '#1e1e1e' );
+
+		render( <TooltipTheme>box</TooltipTheme> );
+
+		expect( screen.getByText( 'box' ) ).toBeInTheDocument();
+	} );
+
+	test.each( [ 'rgba(0, 0, 0, 0.85)', 'not-a-color', null ] )(
+		'seeds the default surface when the surface role resolves to %p',
+		value => {
+			const provider = spyOnThemeProvider();
+			jest.mocked( resolveCssVariable ).mockReturnValue( value );
+
+			render( <TooltipTheme>box</TooltipTheme> );
+
+			expect( provider.mock.calls[ 0 ][ 0 ] ).toMatchObject( {
+				color: { background: '#1e1e1e' },
+			} );
+		}
+	);
+
+	test( 'seeds an opaque surface role as hex', () => {
+		const provider = spyOnThemeProvider();
+		jest.mocked( resolveCssVariable ).mockReturnValue( 'rgb(255, 255, 255)' );
+
+		render( <TooltipTheme>box</TooltipTheme> );
+
+		expect( provider.mock.calls[ 0 ][ 0 ] ).toMatchObject( {
+			color: { background: '#ffffff' },
+		} );
+	} );
+
+	test( 'renders with the real ThemeProvider when the surface role is translucent', () => {
+		jest.mocked( resolveCssVariable ).mockReturnValue( 'rgba(0, 0, 0, 0.85)' );
+
+		render( <TooltipTheme>box</TooltipTheme> );
+
+		expect( screen.getByText( 'box' ) ).toBeInTheDocument();
+	} );
+} );