Charts: Replace hardcoded typography with WPDS design tokens

projects/js-packages/charts/changelog/charts-typography-tokenization

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Replace hardcoded typography values with WPDS design tokens for font family, size, weight, and line height.

projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -1,5 +1,4 @@
 .conversion-funnel-chart {
-	font-family: var(--funnel-font-family, "SF Pro Text");
 
 	&--loading {
 		opacity: 0.6;
@@ -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;
 }
 
@@ -69,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;
@@ -82,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;
 }
@@ -139,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);
 }

projects/js-packages/charts/src/charts/conversion-funnel-chart/stories/index.docs.mdx

@@ -247,18 +247,6 @@ Use the `style` prop or `className` prop to customize the chart container:
 	/>` }
 />
 
-### CSS Custom Properties
-
-The component exposes CSS custom properties for font customization:
-
-<Source
-	language="css"
-	code={ `.my-custom-funnel {
-		--funnel-font-family: "Inter", sans-serif;
-		--step-font-family: "Inter", sans-serif;
-	}` }
-/>
-
 ## Theming Integration
 
 Conversion Funnel Charts integrate seamlessly with the chart theming system. The default theme has neutral colors and styling, and is automatically applied to all charts unless a custom theme is provided. A custom theme can be provided by wrapping your chart in `GlobalChartsProvider` and passing a custom theme object with the properties you want to override to the `theme` prop:

projects/js-packages/charts/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;
 }

projects/js-packages/charts/src/charts/leaderboard-chart/stories/index.docs.mdx

@@ -421,7 +421,6 @@ Combine overlay labels with custom styling and transparent colors:
 		primaryColor="rgba(56, 88, 233, 0.08)" // Semi-transparent
 		style={{
 			'--a8c--charts--leaderboard--bar--border-radius': '4px',
-			fontFamily: '"SF Pro Text", sans-serif',
 		}}
 	/>` }
 />
@@ -445,7 +444,6 @@ The component supports CSS custom properties for advanced styling:
 	language="css"
 	code={ `.myCustomChart {
 		--a8c--charts--leaderboard--bar--border-radius: 8px;
-		font-family: "Custom Font", sans-serif;
 	}` }
 />
 

projects/js-packages/charts/src/charts/leaderboard-chart/stories/index.stories.tsx

@@ -371,7 +371,6 @@ export const OverlayLabelWithImage: Story = {
 		loading: false,
 		style: {
 			'--a8c--charts--leaderboard--bar--border-radius': '4px',
-			fontFamily: `"SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif`,
 		},
 	},
 	render: args => <LeaderboardChartWithOverlayLabelImage { ...args } />,

projects/js-packages/charts/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;

projects/js-packages/charts/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;

projects/js-packages/charts/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);
 	}
 }

projects/js-packages/charts/src/charts/pie-semi-circle-chart/stories/index.docs.mdx

@@ -222,8 +222,8 @@ Segments automatically use theme colors, but you can override individual segment
 
 The chart includes built-in styling for labels and notes with appropriate typography hierarchy:
 
-- **Label**: 16px, font-weight 600, positioned above the chart
-- **Note**: 14px, positioned below the label
+- **Label**: Uses `--wpds-font-size-lg` (default 16px), `--wpds-font-weight-medium` (default 499), positioned above the chart
+- **Note**: Uses `--wpds-font-size-md` (default 13px), positioned below the label
 
 <Source
 	language="jsx"

projects/js-packages/charts/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
 }

projects/js-packages/charts/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;

projects/js-packages/charts/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 {

projects/js-packages/charts/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;

projects/js-packages/charts/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)',

projects/js-packages/charts/src/stories/chart-decorator.tsx

@@ -161,9 +161,20 @@ const StoryChartProvider = ( {
 
 	return (
 		<ThemeProvider color={ themeProviderColor }>
-			<GlobalChartsProvider key={ providerKey } theme={ theme }>
-				{ children }
-			</GlobalChartsProvider>
+			{ /*
+				Storybook acts as a WPDS-themed host application so charts
+				inherit the design system body font through normal CSS
+				cascade.
+			*/ }
+			<div
+				style={ {
+					fontFamily: 'var(--wpds-font-family-body, sans-serif)',
+				} }
+			>
+				<GlobalChartsProvider key={ providerKey } theme={ theme }>
+					{ children }
+				</GlobalChartsProvider>
+			</div>
 		</ThemeProvider>
 	);
 };

projects/js-packages/charts/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?: {

projects/js-packages/charts/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';

projects/js-packages/charts/src/utils/resolve-font-size.ts

@@ -0,0 +1,37 @@
+/**
+ * Resolve a theme `fontSize` value into a plain number suitable for
+ * canvas-based measurement (e.g. `getStringWidth`).
+ *
+ * Accepts:
+ * - A number — returned as-is
+ * - A pixel string like `"12px"` — parsed and returned as a number
+ *
+ * Returns `undefined` for any other input (missing value, NaN, or
+ * relative units like `rem`/`em`/`%`/`vh`) so callers can fall back to
+ * their own default. Relative units are intentionally rejected because
+ * we cannot resolve them to absolute pixels here without a parent
+ * computed style, and silently returning the unitless prefix
+ * (`parseFloat("0.875rem") === 0.875`) would produce nearly-zero
+ * widths in measurement code.
+ * @param val - Raw font size value from a theme, axis style, or props
+ * @return Parsed numeric font size in pixels, or `undefined` when unresolvable
+ */
+export const resolveFontSize = ( val?: number | string ): number | undefined => {
+	if ( typeof val === 'number' ) {
+		return isNaN( val ) ? undefined : val;
+	}
+
+	if ( typeof val === 'string' ) {
+		// Only accept plain numeric strings or pixel values.
+		// Reject rem, em, %, vh, vw, etc. — they cannot be resolved to
+		// absolute pixels without a computed style context.
+		const match = val.trim().match( /^(-?\d+\.?\d*|-?\.\d+)(px)?$/ );
+		if ( ! match ) {
+			return undefined;
+		}
+		const parsed = parseFloat( match[ 1 ] );
+		return isNaN( parsed ) ? undefined : parsed;
+	}
+
+	return undefined;
+};