Add changelog

Author: adamwoodnz

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/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/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,12 @@ 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,
+		...defaultTheme,
 		annotationStyles: {
 			label: {
 				backgroundFill: '#f0f8ff',

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/test/line-chart.test.tsx

@@ -50,7 +50,7 @@ describe( 'LineChart', () => {
 		],
 	};
 
-	const renderWithTheme = ( props = {}, themeName = 'jetpack' ) => {
+	const renderWithTheme = ( props = {}, themeName = 'default' ) => {
 		const theme = THEME_MAP[ themeName ];
 
 		return render(
@@ -61,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(
@@ -792,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();
@@ -801,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 );
@@ -813,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/stories/index.docs.mdx

@@ -9,7 +9,7 @@ A comprehensive charting library for displaying interactive data visualizations
 ## Features
 
 - ✨ **Rich Chart Types** - Bar charts, bar list charts, conversion funnel charts, donut charts, leaderboard visualizations, line charts, and pie charts
-- 🎨 **Themeable** - Built-in themes for Jetpack and WooCommerce with custom theme support
+- 🎨 **Themeable** - Built-in default theme with custom theme support
 - 📱 **Responsive** - Automatically adapts to container size and viewport changes
 - ♿ **Accessible** - Full keyboard navigation, screen reader support, and ARIA compliance
 - 🔧 **Compound Components** - Flexible API using compound component patterns for advanced features
@@ -32,7 +32,7 @@ yarn add @automattic/charts
 
 <Source
 	language="jsx"
-	code={`import { LineChart, GlobalChartsProvider, jetpackTheme } from '@automattic/charts';
+	code={`import { LineChart, GlobalChartsProvider } from '@automattic/charts';
 
 	const data = [
 		{
@@ -48,7 +48,7 @@ yarn add @automattic/charts
 
 	function MyChart() {
 		return (
-			<GlobalChartsProvider theme={jetpackTheme}>
+			<GlobalChartsProvider>
 				<LineChart data={data} />
 			</GlobalChartsProvider>
 		);
@@ -84,7 +84,7 @@ Great for showing parts of a whole, with customizable thickness and gap spacing.
 Charts expect data in a standardized format with `date` (for time-series) or category values and numeric `value` properties.
 
 ### Theme System
-Use the `GlobalChartsProvider` component to apply consistent styling across all charts. Supports Jetpack and WooCommerce themes out of the box.
+Use the `GlobalChartsProvider` component to apply consistent styling across all charts with support for custom themes.
 
 ### Responsive Design
 All charts automatically adapt to their container size using the `withResponsive` higher-order component.