Charts: Remove consumer product themes

projects/js-packages/charts/changelog/charts-141-remove-consumer-product-themes

@@ -0,0 +1,4 @@
+Significance: minor
+Type: removed
+
+Remove Woo and Jetpack themes

projects/js-packages/charts/docs/ai-documentation-guide.md

@@ -176,7 +176,14 @@ Controls [what this category affects]:
 
 ### Theme Integration
 
-Explanation of how feature integrates with chart themes.
+For the Theme Integration section, use the standardized format from the `feature-documentation.mdx.template`. This section should:
+
+- Show how to create a custom theme by defining properties to override
+- Include a code example with `GlobalChartsProvider`
+- List available themes (Default and Custom)
+- Include a note explaining that the provider automatically merges properties
+
+See the template for the complete section structure.
 ```
 
 ### 8. Advanced Usage

projects/js-packages/charts/docs/feature-documentation.mdx.template

@@ -135,7 +135,27 @@ Controls [what this affects]:
 
 ### Theme Integration
 
-[Explanation of how feature integrates with chart themes and any theme-specific styling].
+The [component] integrates with the global charts theming system. Create a custom theme by defining the properties you want to override:
+
+<Source
+	language="tsx"
+	code={ `import { GlobalChartsProvider } from '@automattic/charts';
+
+	const customTheme = {
+		colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'],
+		[otherThemeProperties]: [values],
+	};
+
+	<GlobalChartsProvider theme={customTheme}>
+		<[Component] data={data} />
+	</GlobalChartsProvider>` }
+/>
+
+**Available themes:**
+- **Default**: Neutral colors and styling
+- **Custom**: Define your own theme object with properties to override
+
+**Note**: The `GlobalChartsProvider` automatically merges custom theme properties with the default theme, so you only need to specify the properties you want to override.
 
 ## Custom [Feature Name]
 

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

@@ -539,21 +539,24 @@ Full functionality in all modern browsers supporting:
 
 ## Theming Integration
 
-Bar Charts integrate seamlessly with the chart theming system:
+Bar Charts integrate seamlessly with the chart theming system. Create a custom theme by defining the properties you want to override:
 
 <Source
 	language="jsx"
-	code={ `import { GlobalChartsProvider, jetpackTheme } from '@automattic/charts';
+	code={ `import { GlobalChartsProvider } from '@automattic/charts';
 
-	<GlobalChartsProvider theme={jetpackTheme}>
+	const customTheme = {
+		colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'],
+		gridColor: '#E0E0E0',
+	};
+
+	<GlobalChartsProvider theme={customTheme}>
 		<BarChart data={data} />
 	</GlobalChartsProvider>` }
 />
 
 **Available themes:**
 - **Default**: Neutral colors and styling
-- **Jetpack**: Jetpack brand colors and styling
-- **Woo**: WooCommerce brand colors and styling
-- **Custom**: Define your own theme object with custom color schemes
+- **Custom**: Define your own theme object with properties to override
 
 The component automatically adapts bar colors, patterns, and styling based on the active theme while maintaining accessibility standards.

projects/js-packages/charts/src/components/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx

@@ -310,7 +310,6 @@ describe( 'ConversionFunnelChart', () => {
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } changeIndicator="+5.2%" /> );
 
 			const changeElement = screen.getByText( '+5.2%' );
-			// Note: The exact color value depends on the theme (Woo theme colors)
 			// Color is applied via CSS variable, so check that element exists
 			expect( changeElement ).toBeInTheDocument();
 		} );

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

@@ -461,22 +461,24 @@ The component supports CSS custom properties for advanced styling:
 
 ### Theme Integration
 
-The chart integrates with the global charts theming system:
+The chart integrates with the global charts theming system. Create a custom theme by defining the properties you want to override:
 
 <Source
 	language="tsx"
-	code={ `import { GlobalChartsProvider, jetpackTheme } from '@automattic/charts';
+	code={ `import { GlobalChartsProvider } from '@automattic/charts';
 
-	<GlobalChartsProvider theme={jetpackTheme}>
+	const customTheme = {
+		colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'],
+	};
+
+	<GlobalChartsProvider theme={customTheme}>
 		<LeaderboardChart data={data} />
 	</GlobalChartsProvider>` }
 />
 
 **Available themes:**
 - **Default**: Neutral colors and styling
-- **Jetpack**: Jetpack brand colors and styling
-- **Woo**: WooCommerce brand colors and styling
-- **Custom**: Define your own theme object
+- **Custom**: Define your own theme object with properties to override
 
 ## Accessibility
 

projects/js-packages/charts/src/components/line-chart/stories/annotation.docs.mdx

@@ -15,7 +15,7 @@ The Line Chart component supports a compound component pattern for annotations,
 
 <Source
 	language="jsx"
-	code={ `import { LineChart } from '@automattic/jetpack-charts';
+	code={ `import { LineChart } from '@automattic/charts';
 
 	<LineChart data={ data }>
 		<LineChart.AnnotationsOverlay>
@@ -198,16 +198,11 @@ Controls the text label appearance:
 
 ### Theme Integration
 
-Annotations inherit styling from your chart theme. Default themes provide consistent styling:
-
-- **Jetpack Theme**: Gray colors with subtle styling
-- **Woo Theme**: Black accents for higher contrast
-- **Custom Themes**: Define `annotationStyles` in your theme object
+Annotations inherit styling from your chart theme. You can customize annotation styles by defining `annotationStyles` in your theme object:
 
 <Source
 	language="jsx"
 	code={ `const customTheme = {
-		...jetpackTheme,
 		annotationStyles: {
 			label: {
 				backgroundFill: '#f0f8ff',

projects/js-packages/charts/src/components/line-chart/stories/config.tsx

@@ -1,7 +1,7 @@
 import { GlyphDiamond, GlyphStar } from '@visx/glyph';
 import merge from 'deepmerge';
 import { createElement } from 'react';
-import { jetpackTheme } from '../../../providers';
+import { defaultTheme } from '../../../providers';
 import {
 	chartDecorator,
 	sharedChartArgTypes,
@@ -20,7 +20,7 @@ type StoryArgs = ChartStoryArgs< React.ComponentProps< typeof LineChart > >;
 /**
  * Custom storybook theme with glyphs
  */
-export const glyphTheme = merge( jetpackTheme, {
+export const glyphTheme = merge( defaultTheme, {
 	glyphs: [
 		props => createElement( DefaultGlyph, { ...props, key: props.key } ),
 		props =>

projects/js-packages/charts/src/components/line-chart/stories/glyph.stories.tsx

@@ -56,7 +56,7 @@ const meta: Meta< StoryArgs > = {
 		...lineChartMetaArgs.argTypes,
 		themeName: {
 			...themeArgTypes.themeName,
-			options: [ 'default', 'jetpack', 'woo', 'custom', 'glyph' ],
+			options: [ 'default', 'custom', 'glyph' ],
 		},
 		withStartGlyphs: {
 			control: 'boolean',

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

@@ -678,19 +678,22 @@ Full functionality in all modern browsers supporting:
 
 ## Theming Integration
 
-Line Charts integrate seamlessly with the chart theming system:
+Line Charts integrate seamlessly with the chart theming system. Create a custom theme by defining the properties you want to override:
 
 <Source
 	language="jsx"
-	code={ `import { GlobalChartsProvider, jetpackTheme } from '@automattic/charts';
+	code={ `import { GlobalChartsProvider } from '@automattic/charts';
 
-	<GlobalChartsProvider theme={jetpackTheme}>
+	const customTheme = {
+		colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'],
+		gridColor: '#E0E0E0',
+	};
+
+	<GlobalChartsProvider theme={customTheme}>
 		<LineChart data={data} />
 	</GlobalChartsProvider>` }
 />
 
 **Available themes:**
 - **Default**: Neutral colors and styling
-- **Jetpack**: Jetpack brand colors and styling
-- **Woo**: WooCommerce brand colors and styling
-- **Custom**: Define your own theme object
+- **Custom**: Define your own theme object with properties to override

projects/js-packages/charts/src/components/line-chart/test/line-chart.test.tsx

@@ -7,12 +7,12 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GlyphDiamond } from '@visx/glyph';
 import { createElement, createRef } from 'react';
-import { GlobalChartsProvider, jetpackTheme, wooTheme } from '../../../providers';
+import { GlobalChartsProvider, defaultTheme } from '../../../providers';
 import LineChart, { LineChartUnresponsive } from '../line-chart';
 import type { SingleChartRef } from '../../private/single-chart-context';
 
 const customTheme = {
-	...jetpackTheme,
+	...defaultTheme,
 	glyphs: [
 		props =>
 			createElement(
@@ -31,8 +31,6 @@ const customTheme = {
 
 const THEME_MAP = {
 	default: undefined,
-	jetpack: jetpackTheme,
-	woo: wooTheme,
 	custom: customTheme,
 };
 
@@ -52,7 +50,7 @@ describe( 'LineChart', () => {
 		],
 	};
 
-	const renderWithTheme = ( props = {}, themeName = 'jetpack' ) => {
+	const renderWithTheme = ( props = {}, themeName = 'default' ) => {
 		const theme = THEME_MAP[ themeName ];
 
 		return render(
@@ -63,7 +61,7 @@ describe( 'LineChart', () => {
 		);
 	};
 
-	const renderUnwrappedWithTheme = ( props = {}, themeName = 'jetpack', ref = undefined ) => {
+	const renderUnwrappedWithTheme = ( props = {}, themeName = 'default', ref = undefined ) => {
 		const theme = THEME_MAP[ themeName ];
 
 		return render(
@@ -794,7 +792,7 @@ describe( 'LineChart', () => {
 	describe( 'Chart Ref Interface', () => {
 		test( 'exposes getScales method via ref', () => {
 			const ref = createRef< SingleChartRef >();
-			renderUnwrappedWithTheme( {}, 'jetpack', ref );
+			renderUnwrappedWithTheme( {}, 'default', ref );
 
 			expect( ref.current?.getScales() ).toBeDefined();
 			expect( ref.current?.getScales()?.xScale ).toBeDefined();
@@ -803,7 +801,7 @@ describe( 'LineChart', () => {
 
 		test( 'exposes getChartDimensions method via ref', () => {
 			const ref = createRef< SingleChartRef >();
-			renderUnwrappedWithTheme( { width: 800, height: 400 }, 'jetpack', ref );
+			renderUnwrappedWithTheme( { width: 800, height: 400 }, 'default', ref );
 
 			const dimensions = ref.current?.getChartDimensions();
 			expect( dimensions?.width ).toBe( 800 );
@@ -815,7 +813,7 @@ describe( 'LineChart', () => {
 		const renderWithAnnotations = (
 			children: React.ReactNode,
 			props = {},
-			themeName = 'jetpack'
+			themeName = 'default'
 		) => {
 			const theme = THEME_MAP[ themeName ];
 

projects/js-packages/charts/src/components/pie-chart/stories/donut.stories.tsx

@@ -392,7 +392,7 @@ export const CustomLegendPositioning: Story = {
 	},
 };
 
-const WooPieLegend = ( {
+const CustomPieLegend = ( {
 	chartItems,
 	items,
 	withComparison,
@@ -443,7 +443,7 @@ export const CustomLegend: Story = {
 			<PieChartUnresponsive.Legend
 				// eslint-disable-next-line react/jsx-no-bind
 				render={ items => (
-					<WooPieLegend
+					<CustomPieLegend
 						chartItems={ items }
 						items={ customerRevenueLegendData }
 						withComparison={ args.withComparison }

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

@@ -282,14 +282,22 @@ const customTheme = {
 
 ### Theme Integration
 
-Pie Charts automatically integrate with the chart theme system, inheriting colors, typography, and styling from the active theme. Custom themes can be applied using the `GlobalChartsProvider`:
+Pie Charts automatically integrate with the chart theme system, inheriting colors, typography, and styling from the active theme. Create a custom theme by defining the properties you want to override:
 
 <Source
 	language="jsx"
-	code={ `import { GlobalChartsProvider, jetpackTheme } from '@automattic/charts';
+	code={ `import { GlobalChartsProvider } from '@automattic/charts';
+
+    const customTheme = {
+    	colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'],
+    };
 
-    <GlobalChartsProvider theme={ jetpackTheme }>
+    <GlobalChartsProvider theme={ customTheme }>
     	<PieChart data={ data } />
     </GlobalChartsProvider>` }
 
 />
+
+**Available themes:**
+- **Default**: Neutral colors and styling
+- **Custom**: Define your own theme object with properties to override

projects/js-packages/charts/src/index.ts

@@ -25,8 +25,6 @@ export {
 	useGlobalChartsTheme,
 	GlobalChartsContext,
 	defaultTheme,
-	jetpackTheme,
-	wooTheme,
 } from './providers';
 
 // Types

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

@@ -45,23 +45,6 @@ Wrap your application or chart components with `GlobalChartsProvider` to enable
 - **`theme`** *(optional)*: Partial theme object to customize chart appearance
 - **`children`**: Chart components and other React elements
 
-### Using with Predefined Themes
-
-<Source
-	language="tsx"
-	code={ `import { GlobalChartsProvider, jetpackTheme, wooTheme } from '@automattic/charts';
-
-	// Using Jetpack theme
-	<GlobalChartsProvider theme={ jetpackTheme }>
-		{ /* Charts will use Jetpack colors and styling */ }
-	</GlobalChartsProvider>
-
-	// Using WooCommerce theme
-	<GlobalChartsProvider theme={ wooTheme }>
-		{ /* Charts will use WooCommerce colors and styling */ }
-	</GlobalChartsProvider>` }
-/>
-
 ## Color Coordination
 
 ### Stable Colors for Groups
@@ -339,7 +322,7 @@ When charts register with a `chartId`, their legend data becomes available to st
 	language="tsx"
 	code={ `function DashboardWithCentralizedLegends() {
 		return (
-			<GlobalChartsProvider theme={ wooTheme }>
+			<GlobalChartsProvider>
 				<div className="dashboard-layout">
 					{ /* Charts with hidden legends but registered data */ }
 					<div className="charts-grid">