Charts: Move WPDS font-family host wrapper into the charts story decorator

The previous commit applied the WPDS body font via a decorator and CSS
class in the shared Storybook preview. That worked but put charts-specific
concerns into code shared with every other package's stories.

Move the host-app font-family wrapper into the charts package's own
shared decorator (StoryChartProvider, which backs both chartDecorator
and simpleChartDecorator). Charts stories now render inside a div with
font-family: var(--wpds-font-family-body, system-ui, sans-serif) without
touching the shared storybook preview.jsx or style.scss.

Revert the shared Storybook changes from the previous commit so the
host-app simulation lives entirely in the charts package.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: adamwoodnz

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

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

projects/js-packages/storybook/storybook/preview.jsx

@@ -56,19 +56,11 @@ const preview = {
 		backgrounds: { value: 'jetpack-dashboard' },
 	},
 	decorators: [
-		( Story, context ) => {
-			// Charts stories render inside a WPDS-themed wrapper so they
-			// inherit the design system body font through normal CSS cascade.
-			// Chart components intentionally do not declare font-family at
-			// their root — they rely on the host application to provide it.
-			const isChartsStory = context.title?.startsWith( 'JS Packages/Charts Library' );
-			const content = <Story />;
-			return (
-				<ThemeProvider id="storybook-stories" targetDom={ document.body }>
-					{ isChartsStory ? <div className="charts-storybook-host">{ content }</div> : content }
-				</ThemeProvider>
-			);
-		},
+		Story => (
+			<ThemeProvider id="storybook-stories" targetDom={ document.body }>
+				<Story />
+			</ThemeProvider>
+		),
 	],
 	tags: [ 'autodocs' ],
 };

projects/js-packages/storybook/storybook/style.scss

@@ -7,12 +7,3 @@
 @import "@wordpress/block-library/build-style/style.css";
 @import "@wordpress/block-library/build-style/theme.css";
 @import "@wordpress/block-library/build-style/editor.css";
-
-// Charts stories are wrapped by a decorator in preview.jsx that applies
-// this class, so the Charts Library renders as if it were inside a
-// WPDS-themed host application (inheriting the design system body font
-// through normal CSS cascade, rather than each chart declaring
-// font-family at its root).
-.charts-storybook-host {
-	font-family: var(--wpds-font-family-body, system-ui, sans-serif);
-}