Update docs, template and guidelines

Author: adamwoodnz

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/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

@@ -203,7 +203,6 @@ Annotations inherit styling from your chart theme. You can customize annotation
 <Source
 	language="jsx"
 	code={ `const customTheme = {
-		...defaultTheme,
 		annotationStyles: {
 			label: {
 				backgroundFill: '#f0f8ff',

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/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/stories/index.docs.mdx

@@ -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 with support for custom themes.
+Use the `GlobalChartsProvider` component to apply consistent styling across all charts. Create custom themes by defining the properties you want to override, such as colors, grid styling, and typography.
 
 ### Responsive Design
 All charts automatically adapt to their container size using the `withResponsive` higher-order component.