@automattic/charts 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.1.2",
+		"@automattic/number-formatters": "^1.1.4",
 		"@babel/runtime": "7.28.6",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -88,6 +88,7 @@
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
+		"dompurify": "^3.3.3",
 		"fast-deep-equal": "3.1.3",
 		"gridicons": "3.4.2",
 		"react-google-charts": "^5.2.1",
@@ -98,8 +99,8 @@
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@babel/preset-typescript": "7.28.5",
-		"@storybook/addon-docs": "10.3.1",
-		"@storybook/react": "10.3.1",
+		"@storybook/addon-docs": "10.3.3",
+		"@storybook/react": "10.3.3",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -111,20 +112,20 @@
 		"@visx/glyph": "3.12.0",
 		"@wordpress/components": "32.4.0",
 		"@wordpress/element": "6.42.0",
-		"babel-jest": "30.2.0",
+		"babel-jest": "30.3.0",
 		"babel-plugin-react-remove-properties": "^0.3.1",
-		"esbuild": "0.25.9",
+		"esbuild": "0.27.4",
 		"esbuild-plugin-babel": "^0.2.3",
 		"esbuild-sass-plugin": "^3.1.0",
 		"identity-obj-proxy": "^3.0.0",
-		"jest": "30.2.0",
+		"jest": "30.3.0",
 		"jest-extended": "7.0.0",
 		"postcss": "8.5.6",
 		"postcss-modules": "6.0.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
-		"storybook": "10.3.1",
+		"storybook": "10.3.3",
 		"tsup": "8.5.1",
 		"typescript": "5.9.3"
 	},
@@ -133,6 +134,6 @@
 		"react-dom": "^17.0.0 || ^18.0.0"
 	},
 	"engines": {
-		"node": ">=20.10.0"
+		"node": ">=20.11.0"
 	}
 }

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

@@ -1,7 +1,7 @@
-.conversionFunnelChart {
+.conversion-funnel-chart {
 	font-family: var(--funnel-font-family, "SF Pro Text");
 
-	&.loading {
+	&--loading {
 		opacity: 0.6;
 		pointer-events: none;
 	}
@@ -53,9 +53,12 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	transition: all 0.3s ease;
 
-	&.blurred {
+	&--animated {
+		transition: opacity 0.3s ease;
+	}
+
+	&--blurred {
 		opacity: 0.3;
 	}
 }
@@ -95,24 +98,12 @@
 	border-radius: 4px;
 	position: relative;
 	cursor: pointer;
-	transition: all 0.2s ease;
-
-
-	&.disabled {
-		cursor: pointer;
-	}
 }
 
 .funnel-bar {
 	width: 100%;
 	min-height: 4px;
 	border-radius: 4px 4px 0 0;
-	transition: all 0.3s ease;
-
-	&.selected {
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-		filter: brightness(1.1);
-	}
 
 	&--animated {
 		transform-origin: bottom;

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

@@ -52,7 +52,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 } ) => {
 	const chartId = useChartId( providedChartId );
 	const { conversionFunnelChart: conversionFunnelChartSettings } = useGlobalChartsTheme();
-	const { getElementStyles } = useGlobalChartsContext();
+	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef< HTMLDivElement >( null );
 	const selectedBarRef = useRef< HTMLDivElement | null >( null );
 
@@ -301,7 +301,11 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 			<Stack
 				direction="column"
 				data-testid="conversion-funnel-chart"
-				className={ clsx( styles.conversionFunnelChart, loading && styles.loading, className ) }
+				className={ clsx(
+					styles[ 'conversion-funnel-chart' ],
+					loading && styles[ 'conversion-funnel-chart--loading' ],
+					className
+				) }
 				style={ { ...style, height: resolvedHeight } }
 			>
 				<div className={ styles[ 'empty-state' ] }>
@@ -324,7 +328,11 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 					portalContainerRef( node );
 					chartRef.current = node;
 				} }
-				className={ clsx( styles.conversionFunnelChart, loading && styles.loading, className ) }
+				className={ clsx(
+					styles[ 'conversion-funnel-chart' ],
+					loading && styles[ 'conversion-funnel-chart--loading' ],
+					className
+				) }
 				style={ { ...style, height: resolvedHeight } }
 			>
 				{ /* Main Metric */ }
@@ -348,7 +356,12 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 						return (
 							<div
 								key={ step.id }
-								className={ clsx( styles[ 'funnel-step' ], isBlurred && styles.blurred ) }
+								data-testid="funnel-step"
+								className={ clsx(
+									styles[ 'funnel-step' ],
+									isColorPaletteResolved && styles[ 'funnel-step--animated' ],
+									isBlurred && styles[ 'funnel-step--blurred' ]
+								) }
 							>
 								{ /* Step Label and Rate */ }
 								<div className={ styles[ 'step-header' ] }>
@@ -376,7 +389,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 
 								{ /* Funnel Bar */ }
 								<div
-									className={ clsx( styles[ 'bar-container' ], isBlurred && styles.disabled ) }
+									className={ styles[ 'bar-container' ] }
 									onClick={ stepHandlers.get( step.id )?.onClick }
 									onKeyDown={ stepHandlers.get( step.id )?.onKeyDown }
 									role="button"

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

@@ -461,4 +461,15 @@ describe( 'ConversionFunnelChart', () => {
 			expect( customRenderMainMetric ).toHaveBeenCalled();
 		} );
 	} );
+
+	describe( 'Color palette readiness', () => {
+		it( 'enables transitions once color palette is resolved', () => {
+			render( <ConversionFunnelChart { ...defaultProps } /> );
+
+			// After render, effects have run (via useEffect in GlobalChartsProvider),
+			// so the palette is resolved and the animated class is applied to funnel steps
+			const funnelStep = screen.getAllByTestId( 'funnel-step' )[ 0 ];
+			expect( funnelStep ).toHaveClass( 'funnel-step--animated' );
+		} );
+	} );
 } );

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

@@ -11,6 +11,7 @@ import { Chart, type GoogleChartOptions } from 'react-google-charts';
 import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';
 import { lightenHexColor, normalizeColorToHex } from '../../utils/color-utils';
 import { resolveCssVariable } from '../../utils/resolve-css-var';
+import { sanitizeHtml } from '../../utils/sanitize-html';
 import { withResponsive } from '../private/with-responsive';
 import styles from './geo-chart.module.scss';
 import { GeoChartProps } from './types';
@@ -74,24 +75,50 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	const defaultFillColorHex =
 		normalizeColorToHex( featureFillColor, null, resolveCssVariable ) || DEFAULT_FEATURE_FILL_COLOR;
 
-	// Check if data has HTML tooltips (column with role: 'tooltip' and p.html: true)
-	const hasHtmlTooltips = useMemo(
-		() =>
-			data.length > 0 &&
-			data[ 0 ].some(
-				col =>
-					typeof col === 'object' &&
-					col !== null &&
-					'role' in col &&
-					col.role === 'tooltip' &&
-					'p' in col &&
-					typeof col.p === 'object' &&
-					col.p !== null &&
-					'html' in col.p &&
-					col.p.html === true
-			),
-		[ data ]
-	);
+	// Identify HTML tooltip column indices and sanitize their content to prevent XSS.
+	const sanitizedData = useMemo( () => {
+		if ( data.length === 0 ) {
+			return { data, hasHtmlTooltips: false };
+		}
+
+		const htmlTooltipIndices: number[] = [];
+		for ( let i = 0; i < data[ 0 ].length; i++ ) {
+			const col = data[ 0 ][ i ];
+			if (
+				typeof col === 'object' &&
+				col !== null &&
+				'role' in col &&
+				col.role === 'tooltip' &&
+				'p' in col &&
+				typeof col.p === 'object' &&
+				col.p !== null &&
+				'html' in col.p &&
+				col.p.html === true
+			) {
+				htmlTooltipIndices.push( i );
+			}
+		}
+
+		if ( htmlTooltipIndices.length === 0 ) {
+			return { data, hasHtmlTooltips: false };
+		}
+
+		// Sanitize HTML content in tooltip columns for data rows (skip header row)
+		const sanitizedRows = data.slice( 1 ).map( row => {
+			const newRow = [ ...row ];
+			for ( const colIndex of htmlTooltipIndices ) {
+				if ( typeof newRow[ colIndex ] === 'string' ) {
+					newRow[ colIndex ] = sanitizeHtml( newRow[ colIndex ] as string );
+				}
+			}
+			return newRow;
+		} );
+
+		return {
+			data: [ data[ 0 ], ...sanitizedRows ] as typeof data,
+			hasHtmlTooltips: true,
+		};
+	}, [ data ] );
 
 	const options: GoogleChartOptions = useMemo(
 		() => ( {
@@ -101,7 +128,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			backgroundColor: backgroundColorHex,
 			datalessRegionColor: defaultFillColorHex,
 			defaultColor: defaultFillColorHex,
-			tooltip: { trigger: 'focus', isHtml: hasHtmlTooltips },
+			tooltip: { trigger: 'focus', isHtml: sanitizedData.hasHtmlTooltips },
 			legend: 'none',
 			keepAspectRatio: true,
 		} ),
@@ -112,7 +139,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			fullColorHex,
 			backgroundColorHex,
 			defaultFillColorHex,
-			hasHtmlTooltips,
+			sanitizedData.hasHtmlTooltips,
 		]
 	);
 
@@ -126,7 +153,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 				chartType="GeoChart"
 				width={ width }
 				height={ height }
-				data={ data }
+				data={ sanitizedData.data }
 				options={ options }
 				loader={ loadingPlaceholder }
 			/>

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

@@ -67,24 +67,62 @@ describe( 'GeoChart', () => {
 	} );
 
 	describe( 'Data Handling', () => {
-		test( 'passes data directly to Google Charts without modification', () => {
-			// Test with complex data including plain values, formatted values, and tooltip columns
-			const testData: [
-				( string | object )[],
-				...[ string, number | { v: number; f: string }, string ][],
-			] = [
-				[ 'Country', 'Revenue', { type: 'string', role: 'tooltip', p: { html: true } } ],
-				[ 'US', { v: 1234567, f: '$1.23M' }, '<b>United States</b>' ],
-				[ 'CA', 543210, '<b>Canada</b>' ],
+		test( 'passes non-tooltip data without modification', () => {
+			const testData: [ string[], ...[ string, number ][] ] = [
+				[ 'Country', 'Revenue' ],
+				[ 'US', 1234567 ],
+				[ 'CA', 543210 ],
 			];
 			renderWithTheme( { data: testData } );
 
 			const chartData = screen.getByTestId( 'chart-data' );
 			const data = JSON.parse( chartData.textContent || '[]' );
 
-			// Data should be passed through exactly as provided
 			expect( data ).toEqual( testData );
 		} );
+
+		test( 'sanitizes HTML tooltip content to prevent XSS', () => {
+			const testData: [ ( string | object )[], ...[ string, number, string ][] ] = [
+				[ 'Country', 'Value', { type: 'string', role: 'tooltip', p: { html: true } } ],
+				[ 'US', 100, '<b>United States</b><script>alert("xss")</script>' ],
+				[ 'CA', 50, '<b>Canada</b><img src=x onerror="alert(1)">' ],
+			];
+			renderWithTheme( { data: testData } );
+
+			const chartData = screen.getByTestId( 'chart-data' );
+			const data = JSON.parse( chartData.textContent || '[]' );
+
+			// Script tags and img (not in allowlist) should be stripped
+			expect( data[ 1 ][ 2 ] ).toBe( '<b>United States</b>' );
+			expect( data[ 2 ][ 2 ] ).toBe( '<b>Canada</b>' );
+		} );
+
+		test( 'handles header-only data with HTML tooltip column and no data rows', () => {
+			const testData: [ ( string | object )[] ] = [
+				[ 'Country', 'Value', { type: 'string', role: 'tooltip', p: { html: true } } ],
+			];
+			renderWithTheme( { data: testData } );
+
+			const chartData = screen.getByTestId( 'chart-data' );
+			const data = JSON.parse( chartData.textContent || '[]' );
+
+			// Header row should be preserved as-is
+			expect( data ).toHaveLength( 1 );
+			expect( data[ 0 ][ 0 ] ).toBe( 'Country' );
+		} );
+
+		test( 'preserves safe HTML in tooltip content', () => {
+			const testData: [ ( string | object )[], ...[ string, number, string ][] ] = [
+				[ 'Country', 'Value', { type: 'string', role: 'tooltip', p: { html: true } } ],
+				[ 'US', 100, '<b>United States</b><br>100 orders' ],
+			];
+			renderWithTheme( { data: testData } );
+
+			const chartData = screen.getByTestId( 'chart-data' );
+			const data = JSON.parse( chartData.textContent || '[]' );
+
+			expect( data[ 1 ][ 2 ] ).toBe( '<b>United States</b><br>100 orders' );
+		} );
 	} );
 
 	describe( 'Chart Options', () => {

package/src/charts/private/chart-layout/chart-layout.module.scss

@@ -4,4 +4,12 @@
 	flex: 1;
 	min-height: 0;
 	min-width: 0;
+
+	// The svg displaying inline includes a few px for descenders, which
+	// confuses some browser environments (e.g. headless Chrome) into
+	// constantly growing the container. Setting it to display as block avoids
+	// that.
+	svg {
+		display: block;
+	}
 }

package/src/providers/chart-context/global-charts-provider.tsx

@@ -70,11 +70,16 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 		maxHue: 0,
 	} ) );
 
+	// Track if the color palette has been resolved from the DOM
+	// Useful for animations that should only run after the color palette is resolved
+	const [ isColorPaletteResolved, setIsColorPaletteResolved ] = useState( false );
+
 	// Compute color cache after DOM is updated (so CSS variables are available)
 	// Resolves CSS variables from the wrapper element's scope to handle scoped variables
 	// Note: Only re-runs when providerTheme changes, not when wrapper element changes.
 	// This is intentional, as wrapperRef is expected to be stable for the lifetime of the provider.
 	useLayoutEffect( () => {
+		setIsColorPaletteResolved( false );
 		const { colors } = providerTheme;
 		const resolvedColors: string[] = [];
 		const hues: number[] = [];
@@ -86,25 +91,19 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 		if ( Array.isArray( colors ) ) {
 			for ( const color of colors ) {
 				if ( color && typeof color === 'string' ) {
-					let colorValue = color;
-
-					// Handle CSS custom properties - resolve them to actual values
-					// Supports both '--var-name' and 'var(--var-name)' formats
-					// Use wrapper element to resolve scoped CSS variables
-					if ( color.startsWith( '--' ) || color.startsWith( 'var(' ) ) {
-						const resolved = resolveCssVariable( color, wrapperRef.current );
-
-						if ( resolved === null || resolved === '' ) {
-							continue;
-						}
-
-						colorValue = resolved;
-					}
-
-					// Process hex colors
-					if ( colorValue.startsWith( '#' ) ) {
-						resolvedColors.push( colorValue );
-						const hslColor = d3Hsl( colorValue );
+					// Normalize color to hex format, handling CSS variables, RGB, HSL, etc.
+					// This uses normalizeColorToHex which resolves CSS variables and converts
+					// rgb(), rgba(), hsl() formats to hex
+					const normalizedColor = normalizeColorToHex(
+						color,
+						wrapperRef.current,
+						resolveCssVariable
+					);
+
+					// Only process valid hex colors
+					if ( normalizedColor.startsWith( '#' ) ) {
+						resolvedColors.push( normalizedColor );
+						const hslColor = d3Hsl( normalizedColor );
 						// d3Hsl returns NaN values for invalid colors
 						if ( ! isNaN( hslColor.h ) ) {
 							const hslTuple: [ number, number, number ] = [
@@ -131,6 +130,12 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 		} );
 	}, [ providerTheme ] );
 
+	useEffect( () => {
+		if ( colorCache.colors.length > 0 ) {
+			setIsColorPaletteResolved( true );
+		}
+	}, [ colorCache ] );
+
 	const [ groupToColorMap, setGroupToColorMap ] = useState< Map< string, string > >(
 		() => new Map()
 	);
@@ -277,6 +282,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 			toggleSeriesVisibility,
 			isSeriesVisible,
 			getHiddenSeries,
+			isColorPaletteResolved,
 		} ),
 		[
 			charts,
@@ -288,6 +294,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 			toggleSeriesVisibility,
 			isSeriesVisible,
 			getHiddenSeries,
+			isColorPaletteResolved,
 		]
 	);
 

package/src/providers/chart-context/test/chart-context.test.tsx

@@ -47,6 +47,57 @@ describe( 'ChartContext', () => {
 			expect( contextValue.charts ).toBeInstanceOf( Map );
 		} );
 
+		it( 'exposes isColorPaletteResolved as true after render', () => {
+			let contextValue: GlobalChartsContextValue;
+
+			const TestComponent = () => {
+				contextValue = useGlobalChartsContext();
+				return <div>Test</div>;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			// After render and effects, isColorPaletteResolved should be true
+			expect( contextValue.isColorPaletteResolved ).toBe( true );
+		} );
+
+		it( 'resolves palette again after theme change', () => {
+			let contextValue: GlobalChartsContextValue;
+
+			const TestComponent = () => {
+				contextValue = useGlobalChartsContext();
+				return <div>Test</div>;
+			};
+
+			const theme1: Partial< ChartTheme > = {
+				colors: [ '#006DAB', '#1F9828' ],
+			};
+			const theme2: Partial< ChartTheme > = {
+				colors: [ '#FF0000', '#00FF00' ],
+			};
+
+			const { rerender } = render(
+				<GlobalChartsProvider theme={ theme1 }>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			expect( contextValue.isColorPaletteResolved ).toBe( true );
+
+			rerender(
+				<GlobalChartsProvider theme={ theme2 }>
+					<TestComponent />
+				</GlobalChartsProvider>
+			);
+
+			// After theme change, palette should re-resolve to true
+			expect( contextValue.isColorPaletteResolved ).toBe( true );
+		} );
+
 		it( 'throws error when useGlobalChartsContext is used outside provider', () => {
 			const TestComponent = () => {
 				useGlobalChartsContext();
@@ -1907,7 +1958,7 @@ describe( 'ChartContext', () => {
 				};
 
 				const cssVarTheme: ChartTheme = {
-					colors: [ '--rgb-color', '#ff0000' ],
+					colors: [ '--rgb-color', '#00ff00' ],
 				} as ChartTheme;
 
 				render(
@@ -1916,7 +1967,7 @@ describe( 'ChartContext', () => {
 					</GlobalChartsProvider>
 				);
 
-				// Non-hex colors are currently skipped, should use second color
+				// RGB colors should now be converted to hex and used
 				const color = contextValue.getElementStyles( {
 					data: undefined,
 					index: 0,
@@ -1924,6 +1975,127 @@ describe( 'ChartContext', () => {
 
 				expect( color ).toBe( '#ff0000' );
 			} );
+
+			it( 'handles CSS variables resolving to HSL colors', () => {
+				window.getComputedStyle = jest.fn( () => ( {
+					getPropertyValue: ( prop: string ) => {
+						if ( prop === '--hsl-color' ) {
+							return 'hsl(120, 100%, 50%)'; // HSL format (green)
+						}
+						return '';
+					},
+				} ) ) as unknown as typeof window.getComputedStyle;
+
+				let contextValue: GlobalChartsContextValue;
+
+				const TestComponent = () => {
+					contextValue = useGlobalChartsContext();
+					return <div>Test</div>;
+				};
+
+				const cssVarTheme: ChartTheme = {
+					colors: [ '--hsl-color', '#ff0000' ],
+				} as ChartTheme;
+
+				render(
+					<GlobalChartsProvider theme={ cssVarTheme }>
+						<TestComponent />
+					</GlobalChartsProvider>
+				);
+
+				// HSL colors should be converted to hex and used
+				const color = contextValue.getElementStyles( {
+					data: undefined,
+					index: 0,
+				} ).color;
+
+				expect( color ).toBe( '#00ff00' );
+			} );
+
+			it( 'handles CSS variables resolving to RGBA colors', () => {
+				window.getComputedStyle = jest.fn( () => ( {
+					getPropertyValue: ( prop: string ) => {
+						if ( prop === '--rgba-color' ) {
+							return 'rgba(0, 0, 255, 0.5)'; // RGBA format (blue with transparency)
+						}
+						return '';
+					},
+				} ) ) as unknown as typeof window.getComputedStyle;
+
+				let contextValue: GlobalChartsContextValue;
+
+				const TestComponent = () => {
+					contextValue = useGlobalChartsContext();
+					return <div>Test</div>;
+				};
+
+				const cssVarTheme: ChartTheme = {
+					colors: [ '--rgba-color', '#ff0000' ],
+				} as ChartTheme;
+
+				render(
+					<GlobalChartsProvider theme={ cssVarTheme }>
+						<TestComponent />
+					</GlobalChartsProvider>
+				);
+
+				// RGBA colors are converted to hex (alpha is stripped)
+				const color = contextValue.getElementStyles( {
+					data: undefined,
+					index: 0,
+				} ).color;
+
+				expect( color ).toBe( '#0000ff' );
+			} );
+
+			it( 'handles mix of RGB, HSL, and hex in theme colors', () => {
+				window.getComputedStyle = jest.fn( () => ( {
+					getPropertyValue: ( prop: string ) => {
+						if ( prop === '--rgb-red' ) {
+							return 'rgb(255, 0, 0)';
+						}
+						if ( prop === '--hsl-green' ) {
+							return 'hsl(120, 100%, 50%)';
+						}
+						return '';
+					},
+				} ) ) as unknown as typeof window.getComputedStyle;
+
+				let contextValue: GlobalChartsContextValue;
+
+				const TestComponent = () => {
+					contextValue = useGlobalChartsContext();
+					return <div>Test</div>;
+				};
+
+				const cssVarTheme: ChartTheme = {
+					colors: [ '--rgb-red', '--hsl-green', '#0000ff' ],
+				} as ChartTheme;
+
+				render(
+					<GlobalChartsProvider theme={ cssVarTheme }>
+						<TestComponent />
+					</GlobalChartsProvider>
+				);
+
+				// All color formats should be properly converted
+				const color1 = contextValue.getElementStyles( {
+					data: undefined,
+					index: 0,
+				} ).color;
+				const color2 = contextValue.getElementStyles( {
+					data: undefined,
+					index: 1,
+				} ).color;
+				const color3 = contextValue.getElementStyles( {
+					data: undefined,
+					index: 2,
+				} ).color;
+
+				expect( color1 ).toBe( '#ff0000' ); // RGB red
+				expect( color2 ).toBe( '#00ff00' ); // HSL green
+				expect( color3 ).toBe( '#0000ff' ); // Hex blue
+			} );
 		} );
 
 		describe( 'Error Handling', () => {
@@ -2058,7 +2230,7 @@ describe( 'ChartContext', () => {
 				} ).color;
 
 				expect( color1 ).toBe( '#ff0000' );
-				expect( color2 ).toBe( '#bad' ); // Invalid color is still in palette
+				expect( color2 ).toBe( '#bbaadd' ); // #bad is expanded to #bbaadd by normalizeColorToHex
 				expect( color3 ).toBe( '#0000ff' );
 			} );
 		} );