@automattic/charts 1.0.1 → 1.1.0

package/dist/visx/group/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-EMMSS5I5.cjs');
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-DZUJEN5N.cjs');
 
 // src/visx/group/index.ts
 var _group = require('@visx/group');

package/dist/visx/group/index.js

@@ -1,4 +1,4 @@
-import "../../chunk-G3PMV62Z.js";
+import "../../chunk-5WRI5ZAA.js";
 
 // src/visx/group/index.ts
 import { Group } from "@visx/group";

package/dist/visx/legend/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-EMMSS5I5.cjs');
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-DZUJEN5N.cjs');
 
 // src/visx/legend/index.ts
 var _legend = require('@visx/legend');

package/dist/visx/legend/index.js

@@ -1,4 +1,4 @@
-import "../../chunk-G3PMV62Z.js";
+import "../../chunk-5WRI5ZAA.js";
 
 // src/visx/legend/index.ts
 import { LineShape, CircleShape, RectShape } from "@visx/legend";

package/dist/visx/text/index.cjs

@@ -3,7 +3,7 @@
 
 
 var _chunk7OZEQ5HEcjs = require('../../chunk-7OZEQ5HE.cjs');
-require('../../chunk-EMMSS5I5.cjs');
+require('../../chunk-DZUJEN5N.cjs');
 
 
 

package/dist/visx/text/index.js

@@ -3,7 +3,7 @@ import {
   getStringWidth,
   useText
 } from "../../chunk-NFRB2POF.js";
-import "../../chunk-G3PMV62Z.js";
+import "../../chunk-5WRI5ZAA.js";
 export {
   Text,
   getStringWidth,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,8 +63,8 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.1.3",
-		"@babel/runtime": "7.28.6",
+		"@automattic/number-formatters": "^1.1.5",
+		"@babel/runtime": "7.29.2",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
 		"@visx/axis": "^3.12.0",
@@ -83,14 +83,14 @@
 		"@visx/vendor": "^3.12.0",
 		"@visx/xychart": "^3.12.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/theme": "0.9.0",
+		"@wordpress/icons": "^12.0.0",
+		"@wordpress/theme": "0.10.0",
 		"@wordpress/ui": "0.9.0",
 		"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",
 		"tslib": "2.8.1"
 	},
@@ -99,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",
@@ -110,11 +110,12 @@
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"@visx/glyph": "3.12.0",
-		"@wordpress/components": "32.4.0",
-		"@wordpress/element": "6.42.0",
+		"@wordpress/components": "32.5.0",
+		"@wordpress/element": "6.43.0",
+		"@wordpress/private-apis": "1.43.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",
@@ -125,7 +126,7 @@
 		"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"
 	},

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

@@ -1,7 +1,6 @@
-.conversionFunnelChart {
-	font-family: var(--funnel-font-family, "SF Pro Text");
+.conversion-funnel-chart {
 
-	&.loading {
+	&--loading {
 		opacity: 0.6;
 		pointer-events: none;
 	}
@@ -19,22 +18,20 @@
 	overflow: hidden;
 	color: #1e1e1e;
 	text-overflow: ellipsis;
-	font-family: var(--funnel-font-family, "SF Pro Text");
-	font-size: 18px;
+	font-size: var(--wpds-font-size-xl, 18px);
 	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
+	font-weight: var(--wpds-font-weight-medium, 499);
+	line-height: var(--wpds-font-line-height-sm, 20px);
 	margin: 0;
 }
 
 .change-indicator {
 	overflow: hidden;
 	text-overflow: ellipsis;
-	font-family: var(--funnel-font-family, "SF Pro Text");
-	font-size: 13px;
+	font-size: var(--wpds-font-size-md, 13px);
 	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
+	font-weight: var(--wpds-font-weight-medium, 499);
+	line-height: var(--wpds-font-line-height-sm, 20px);
 	margin: 0;
 }
 
@@ -53,9 +50,12 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	transition: all 0.3s ease;
 
-	&.blurred {
+	&--animated {
+		transition: opacity 0.3s ease;
+	}
+
+	&--blurred {
 		opacity: 0.3;
 	}
 }
@@ -66,11 +66,10 @@
 
 .step-label {
 	color: #757575;
-	font-family: var(--step-font-family, "SF Pro");
-	font-size: 12px;
+	font-size: var(--wpds-font-size-sm, 12px);
 	font-style: normal;
-	font-weight: 400;
-	line-height: 16px;
+	font-weight: var(--wpds-font-weight-regular, 400);
+	line-height: var(--wpds-font-line-height-xs, 16px);
 	margin: 0 0 2px 0;
 	display: block;
 	overflow: hidden;
@@ -79,11 +78,10 @@
 
 .step-rate {
 	color: #1e1e1e;
-	font-family: var(--step-font-family, "SF Pro");
-	font-size: 13px;
+	font-size: var(--wpds-font-size-md, 13px);
 	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
+	font-weight: var(--wpds-font-weight-medium, 499);
+	line-height: var(--wpds-font-line-height-sm, 20px);
 	margin: 0;
 	display: block;
 }
@@ -95,24 +93,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;
@@ -148,25 +134,23 @@
 
 .tooltip-title {
 	color: #1e1e1e;
-	font-family: "SF Pro", sans-serif;
-	font-size: 12px;
+	font-size: var(--wpds-font-size-sm, 12px);
 	font-style: normal;
-	font-weight: 400;
-	line-height: 16px;
+	font-weight: var(--wpds-font-weight-regular, 400);
+	line-height: var(--wpds-font-line-height-xs, 16px);
 }
 
 .tooltip-content {
 	color: #1e1e1e;
-	font-family: "SF Pro", sans-serif;
-	font-size: 13px;
+	font-size: var(--wpds-font-size-md, 13px);
 	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
+	font-weight: var(--wpds-font-weight-medium, 499);
+	line-height: var(--wpds-font-line-height-sm, 20px);
 }
 
 .empty-state {
 	text-align: center;
 	padding: 48px 24px;
 	color: #6b7280;
-	font-size: 16px;
+	font-size: var(--wpds-font-size-lg, 16px);
 }

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/leaderboard-chart/leaderboard-chart.module.scss

@@ -73,6 +73,6 @@
 	padding: 32px 16px;
 	text-align: center;
 	color: #666;
-	font-size: 14px;
+	font-size: var(--wpds-font-size-md, 13px);
 	font-style: italic;
 }

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

@@ -1,8 +1,8 @@
 /* eslint-disable @wordpress/no-unsafe-wp-apis */
-import { __experimentalGrid as Grid, __experimentalText as Text } from '@wordpress/components';
+import { __experimentalGrid as Grid } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Stack } from '@wordpress/ui';
+import { Stack, Text } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useContext, useMemo, type FC } from 'react';
 import { Legend } from '../../components/legend';

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

@@ -21,7 +21,7 @@
 	}
 
 	&__tooltip-date {
-		font-weight: 700;
+		font-weight: var(--wpds-font-weight-medium, 499);
 		padding-bottom: 10px;
 	}
 
@@ -33,7 +33,7 @@
 	}
 
 	&__tooltip-label {
-		font-weight: 500;
+		font-weight: var(--wpds-font-weight-medium, 499);
 		padding-right: 1rem;
 	}
 
@@ -65,7 +65,7 @@
 		background: #fff;
 		border: none;
 		border-radius: 4px;
-		font-size: 14px;
+		font-size: var(--wpds-font-size-md, 13px);
 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 		position: fixed;
 		margin: 0.5rem;

package/src/charts/line-chart/private/line-chart-annotation-label-popover.tsx

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
+import { Icon, close } from '@wordpress/icons';
 import clsx from 'clsx';
-import Gridicon from 'gridicons';
 import { useEffect, useId, useRef, useState } from 'react';
 import { isSafari } from '../../../utils';
 import styles from '../line-chart.module.scss';
@@ -100,7 +100,7 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 						className={ styles[ 'line-chart__annotation-label-popover-close-button' ] }
 						aria-label={ __( 'Close', 'jetpack-charts' ) }
 					>
-						<Gridicon icon="cross" size={ 16 } />
+						<Icon icon={ close } size={ 16 } />
 					</button>
 				</div>
 			</div>

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

@@ -20,7 +20,7 @@ import {
 	useGlobalChartsTheme,
 	GlobalChartsContext,
 } from '../../providers';
-import { attachSubComponents } from '../../utils';
+import { attachSubComponents, resolveFontSize } from '../../utils';
 import { getStringWidth } from '../../visx/text';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
@@ -441,10 +441,12 @@ const PieChartInternal = ( {
 														groupProps.onMouseLeave = onMouseLeave;
 													}
 
-													// Estimate text width more accurately for background sizing
-													const fontSize = 12;
+													const svgLabelSmall = providerTheme.svgLabelSmall;
+													const fontSize = resolveFontSize( svgLabelSmall?.fontSize ) ?? 12;
 													const estimatedTextWidth = getStringWidth( arc.data.label, {
 														fontSize,
+														fontFamily: svgLabelSmall?.fontFamily,
+														fontWeight: svgLabelSmall?.fontWeight,
 													} );
 													const labelPadding = 6;
 													const backgroundWidth = estimatedTextWidth + labelPadding * 2;

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -11,11 +11,11 @@
 	}
 
 	.label {
-		font-weight: 600;
-		font-size: 16px;
+		font-weight: var(--wpds-font-weight-medium, 499);
+		font-size: var(--wpds-font-size-lg, 16px);
 	}
 
 	.note {
-		font-size: 14px;
+		font-size: var(--wpds-font-size-md, 13px);
 	}
 }

package/src/components/legend/private/base-legend.module.scss

@@ -44,7 +44,7 @@
 .legend-item {
 	display: flex;
 	align-items: center;
-	font-size: 0.875rem;
+	font-size: var(--wpds-font-size-md, 13px);
 
 	&--interactive {
 		cursor: pointer;
@@ -101,6 +101,6 @@
 }
 
 .legend-item-value {
-	font-weight: 500;
+	font-weight: var(--wpds-font-weight-medium, 499);
 	flex-shrink: 0; // Prevent value from shrinking when text is ellipsized
 }

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

@@ -3,7 +3,7 @@
 	background-color: rgba(0, 0, 0, 0.85);
 	color: #fff;
 	border-radius: 4px;
-	font-size: 14px;
+	font-size: var(--wpds-font-size-md, 13px);
 	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 	position: absolute;
 	pointer-events: none;

package/src/components/trend-indicator/trend-indicator.module.scss

@@ -2,8 +2,8 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.125em;
-	font-size: 0.875rem;
-	font-weight: 500;
+	font-size: var(--wpds-font-size-md, 13px);
+	font-weight: var(--wpds-font-weight-medium, 499);
 	line-height: 1;
 
 	&--up {

package/src/hooks/use-chart-margin.tsx

@@ -1,6 +1,6 @@
 import { createScale, getTicks } from '@visx/scale';
 import { useMemo } from 'react';
-import { getLongestTickWidth } from '../utils';
+import { getLongestTickWidth, resolveFontSize } from '../utils';
 import type { BaseChartProps, DataPointDate, SeriesData } from '../types';
 import type { XYChartTheme } from '@visx/xychart';
 
@@ -50,19 +50,6 @@ const DEFAULT_TICK_LENGTH = 8;
  */
 const DEFAULT_Y_TICK_WIDTH = 40;
 
-const resolveFontSize = ( val?: number | string ): number | undefined => {
-	if ( typeof val === 'number' && ! isNaN( val ) ) {
-		return val;
-	}
-
-	if ( typeof val === 'string' ) {
-		const parsed = parseFloat( val );
-		return isNaN( parsed ) ? undefined : parsed;
-	}
-
-	return undefined;
-};
-
 const getXAxisLabelMetrics = ( theme: XYChartTheme, orientation: 'top' | 'bottom' ) => {
 	const xAxisStyles =
 		orientation === 'top' ? theme.axisStyles?.x?.top : theme.axisStyles?.x?.bottom;

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[] = [];
@@ -125,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()
 	);
@@ -271,6 +282,7 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 			toggleSeriesVisibility,
 			isSeriesVisible,
 			getHiddenSeries,
+			isColorPaletteResolved,
 		} ),
 		[
 			charts,
@@ -282,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();

package/src/providers/chart-context/themes.ts

@@ -26,7 +26,13 @@ const defaultTheme: CompleteChartTheme = {
 	},
 	seriesLineStyles: [],
 	glyphs: [],
-	svgLabelSmall: { fill: 'var(--jp-gray-80, #2c3338)' },
+	// `fontFamily: 'inherit'` overrides visx's hardcoded default font stack
+	// (`-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif`)
+	// that `buildChartTheme` injects as an inline style on SVG `<text>`
+	// elements for axis labels and ticks. Setting `inherit` lets SVG text
+	// pick up the host application's font-family via normal CSS inheritance.
+	svgLabelSmall: { fill: 'var(--jp-gray-80, #2c3338)', fontFamily: 'inherit' },
+	svgLabelBig: { fontFamily: 'inherit' },
 	annotationStyles: {
 		label: {
 			anchorLineStroke: 'var(--jp-gray-80, #2c3338)',

package/src/providers/chart-context/types.ts

@@ -35,4 +35,5 @@ export interface GlobalChartsContextValue {
 	toggleSeriesVisibility: ( chartId: string, seriesLabel: string ) => void;
 	isSeriesVisible: ( chartId: string, seriesLabel: string ) => boolean;
 	getHiddenSeries: ( chartId: string ) => Set< string >;
+	isColorPaletteResolved: boolean;
 }

package/src/types.ts

@@ -243,6 +243,8 @@ export type ChartTheme = {
 	};
 	/** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
 	svgLabelSmall?: TextProps;
+	/** Styles for large SVG text (eg. axis titles), passed through to the XYChart theme. */
+	svgLabelBig?: TextProps;
 	annotationStyles?: AnnotationStyles;
 	/** GeoChart specific settings */
 	geoChart?: {

package/src/utils/index.ts

@@ -26,3 +26,6 @@ export * from './color-utils';
 
 // CSS utilities
 export { resolveCssVariable } from './resolve-css-var';
+
+// Font sizing utilities
+export { resolveFontSize } from './resolve-font-size';