From 3225549c6d98ab3a7a536f75147c1caa6e9e7e6b Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Wed, 18 Dec 2024 13:22:11 -0600
Subject: [PATCH 1/4] Refactor examples so we can support multiple per chart
 type

---
 .../_components => components}/button.tsx     |   6 +-
 website/src/hooks/useClickOutside.tsx         |  29 ++
 .../pages/themes/_components/chart-panel.tsx  |  20 +-
 .../themes/_components/examples/area.tsx      |  26 ++
 .../themes/_components/examples/axis.tsx      |  16 +
 .../pages/themes/_components/examples/bar.tsx |  41 +++
 .../themes/_components/examples/box-plot.tsx  |  26 ++
 .../_components/examples/candlestick.tsx      |  57 +++
 .../themes/_components/examples/errorbar.tsx  |  23 ++
 .../themes/_components/examples/example.ts    |  15 +
 .../themes/_components/examples/group.tsx     |  45 +++
 .../themes/_components/examples/histogram.tsx |  30 ++
 .../themes/_components/examples/index.ts      |  53 +++
 .../themes/_components/examples/legend.tsx    |  58 +++
 .../themes/_components/examples/line.tsx      |  28 ++
 .../pages/themes/_components/examples/pie.tsx |  23 ++
 .../examples/polar-axis-dependent.tsx         |  21 ++
 .../_components/examples/polar-axis.tsx       |  15 +
 .../themes/_components/examples/scatter.tsx   |  22 ++
 .../themes/_components/examples/stack.tsx     |  26 ++
 .../themes/_components/examples/voronoi.tsx   |  22 ++
 .../_components/preview-settings-menu.tsx     |  87 -----
 .../src/pages/themes/_components/sidenav.tsx  |  13 +-
 .../themes/_components/theme-preview.tsx      | 146 --------
 .../_components/theme-preview/header.tsx      |  27 ++
 .../_components/theme-preview/index.tsx       |  34 ++
 .../_components/theme-preview/options.tsx     |  45 +++
 .../_components/theme-preview/preview.tsx     |  33 ++
 website/src/pages/themes/_config/axis.tsx     |  27 +-
 website/src/pages/themes/_config/chart.tsx    | 334 ++----------------
 website/src/pages/themes/_config/index.tsx    |   5 +-
 .../_providers/previewOptionsProvider.tsx     |  17 +-
 website/src/pages/themes/index.tsx            |   2 +-
 33 files changed, 782 insertions(+), 590 deletions(-)
 rename website/src/{pages/themes/_components => components}/button.tsx (64%)
 create mode 100644 website/src/hooks/useClickOutside.tsx
 create mode 100644 website/src/pages/themes/_components/examples/area.tsx
 create mode 100644 website/src/pages/themes/_components/examples/axis.tsx
 create mode 100644 website/src/pages/themes/_components/examples/bar.tsx
 create mode 100644 website/src/pages/themes/_components/examples/box-plot.tsx
 create mode 100644 website/src/pages/themes/_components/examples/candlestick.tsx
 create mode 100644 website/src/pages/themes/_components/examples/errorbar.tsx
 create mode 100644 website/src/pages/themes/_components/examples/example.ts
 create mode 100644 website/src/pages/themes/_components/examples/group.tsx
 create mode 100644 website/src/pages/themes/_components/examples/histogram.tsx
 create mode 100644 website/src/pages/themes/_components/examples/index.ts
 create mode 100644 website/src/pages/themes/_components/examples/legend.tsx
 create mode 100644 website/src/pages/themes/_components/examples/line.tsx
 create mode 100644 website/src/pages/themes/_components/examples/pie.tsx
 create mode 100644 website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
 create mode 100644 website/src/pages/themes/_components/examples/polar-axis.tsx
 create mode 100644 website/src/pages/themes/_components/examples/scatter.tsx
 create mode 100644 website/src/pages/themes/_components/examples/stack.tsx
 create mode 100644 website/src/pages/themes/_components/examples/voronoi.tsx
 delete mode 100644 website/src/pages/themes/_components/preview-settings-menu.tsx
 delete mode 100644 website/src/pages/themes/_components/theme-preview.tsx
 create mode 100644 website/src/pages/themes/_components/theme-preview/header.tsx
 create mode 100644 website/src/pages/themes/_components/theme-preview/index.tsx
 create mode 100644 website/src/pages/themes/_components/theme-preview/options.tsx
 create mode 100644 website/src/pages/themes/_components/theme-preview/preview.tsx

diff --git a/website/src/pages/themes/_components/button.tsx b/website/src/components/button.tsx
similarity index 64%
rename from website/src/pages/themes/_components/button.tsx
rename to website/src/components/button.tsx
index 515dc3451..36ee18636 100644
--- a/website/src/pages/themes/_components/button.tsx
+++ b/website/src/components/button.tsx
@@ -8,7 +8,7 @@ type ButtonProps = {
   disabled?: boolean;
 };
 
-const Button = ({
+export const Button = ({
   onClick,
   children,
   className = "",
@@ -17,7 +17,7 @@ const Button = ({
   ...props
 }: ButtonProps) => {
   const baseClasses =
-    "py-2 px-5 border-none font-bold rounded-md cursor-pointer text-sm bg-button-bg text-button-fg hover:underline disabled:bg-grayscale-300 disabled:text-grayscale-400 disabled:cursor-not-allowed disabled:hover:no-underline";
+    "py-2 px-4 font-semibold rounded-md cursor-pointer text-sm border-2 border-solid border-button-border bg-button-bg text-button-fg hover:bg-button-bg-hover hover:text-button-fg-hover disabled:bg-grayscale-300 disabled:text-grayscale-400 disabled:cursor-not-allowed";
 
   return (
     <button
@@ -31,5 +31,3 @@ const Button = ({
     </button>
   );
 };
-
-export default Button;
diff --git a/website/src/hooks/useClickOutside.tsx b/website/src/hooks/useClickOutside.tsx
new file mode 100644
index 000000000..867de51ea
--- /dev/null
+++ b/website/src/hooks/useClickOutside.tsx
@@ -0,0 +1,29 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+export function useClickOutside(cb: (e: Event) => void) {
+  const ref = useRef<HTMLDivElement>(null);
+  const refCb = useRef(cb);
+
+  useLayoutEffect(() => {
+    refCb.current = cb;
+  });
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const element = ref.current;
+      if (element && !element.contains(e.target as Node)) {
+        refCb.current(e);
+      }
+    };
+
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("touchstart", handler);
+
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("touchstart", handler);
+    };
+  }, []);
+
+  return ref;
+}
diff --git a/website/src/pages/themes/_components/chart-panel.tsx b/website/src/pages/themes/_components/chart-panel.tsx
index 1fa76351d..fddbf81ca 100644
--- a/website/src/pages/themes/_components/chart-panel.tsx
+++ b/website/src/pages/themes/_components/chart-panel.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import Control from "./control";
 import Select from "./select";
 import { usePreviewOptions } from "../_providers/previewOptionsProvider";
@@ -13,7 +13,7 @@ const ChartPanel = ({
   config: { title, description, selectLabel, types },
 }: ChartPanelProps) => {
   const [chartType, setChartType] = React.useState(Object.keys(types)[0]);
-  const { setExampleConfigs } = usePreviewOptions();
+  const { setExampleContent } = usePreviewOptions();
   const selectOptions = Object.keys(types).map((key) => ({
     label: types[key].label,
     value: key,
@@ -27,18 +27,14 @@ const ChartPanel = ({
   );
   const controls = types[chartType]?.controls || [];
 
-  const onChartTypeChange = useCallback(
-    (newValue: string) => {
-      setChartType(newValue);
-      const examples = types[newValue] ? [types[newValue]] : [];
-      setExampleConfigs(examples);
-    },
-    [setExampleConfigs, types],
-  );
+  const onChartTypeChange = (newValue: string) => {
+    setChartType(newValue);
+  };
 
   useEffect(() => {
-    onChartTypeChange(Object.keys(types)[0]);
-  }, [types, onChartTypeChange]);
+    const examples = types[chartType]?.content || [];
+    setExampleContent(examples);
+  }, [chartType, setExampleContent, types]);
 
   return (
     <>
diff --git a/website/src/pages/themes/_components/examples/area.tsx b/website/src/pages/themes/_components/examples/area.tsx
new file mode 100644
index 000000000..818787497
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/area.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { VictoryArea, VictoryAxis, VictoryChart } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const AreaExamples: ExampleConfig[] = [
+  {
+    title: "VictoryArea",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" />
+        <VictoryAxis dependentAxis label="Y Axis" />
+        <VictoryArea
+          {...props}
+          data={[
+            { x: 1, y: 2, label: "A" },
+            { x: 2, y: 3, label: "B" },
+            { x: 3, y: 5, label: "C" },
+            { x: 4, y: 4, label: "D" },
+            { x: 5, y: 7, label: "E" },
+          ]}
+        />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/axis.tsx b/website/src/pages/themes/_components/examples/axis.tsx
new file mode 100644
index 000000000..3b9be9c98
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/axis.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { VictoryAxis, VictoryChart } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const AxisExamples: ExampleConfig[] = [
+  {
+    title: "VictoryAxis",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" {...props} />
+        <VictoryAxis dependentAxis label="Y Axis" {...props} />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/bar.tsx b/website/src/pages/themes/_components/examples/bar.tsx
new file mode 100644
index 000000000..d4ca918b0
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/bar.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { VictoryBar, VictoryAxis, VictoryChart } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const BarExamples: ExampleConfig[] = [
+  {
+    title: "VictoryBar",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" />
+        <VictoryAxis dependentAxis label="Y Axis" />
+        <VictoryBar
+          {...props}
+          data={[
+            {
+              x: 1,
+              y: 2,
+            },
+            {
+              x: 2,
+              y: 3,
+            },
+            {
+              x: 3,
+              y: 5,
+            },
+            {
+              x: 4,
+              y: 4,
+            },
+            {
+              x: 5,
+              y: 7,
+            },
+          ]}
+        />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/box-plot.tsx b/website/src/pages/themes/_components/examples/box-plot.tsx
new file mode 100644
index 000000000..147156eb5
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/box-plot.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable no-magic-numbers */
+
+import React from "react";
+import { VictoryBoxPlot } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const BoxPlotExamples: ExampleConfig[] = [
+  {
+    title: "VictoryBoxPlot",
+    content: (props) => (
+      <VictoryBoxPlot
+        {...props}
+        data={[
+          { x: 1, y: [1, 2, 3, 5, 8] },
+          { x: 2, y: [3, 2, 8, 10, 12] },
+          { x: 3, y: [2, 8, 6, 5, 10] },
+          { x: 4, y: [1, 3, 2, 9, 5] },
+          { x: 5, y: [3, 2, 9, 5, 7] },
+        ]}
+        labels
+        labelOrientation="right"
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/candlestick.tsx b/website/src/pages/themes/_components/examples/candlestick.tsx
new file mode 100644
index 000000000..c4845a2d0
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/candlestick.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { VictoryCandlestick } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const CandlestickExamples: ExampleConfig[] = [
+  {
+    title: "VictoryCandlestick",
+    content: (props) => (
+      <VictoryCandlestick
+        {...props}
+        data={[
+          {
+            x: "3/1/23",
+            open: 5,
+            close: 10,
+            high: 15,
+            low: 0,
+            label: "A",
+          },
+          {
+            x: "3/2/23",
+            open: 10,
+            close: 15,
+            high: 20,
+            low: 5,
+            label: "B",
+          },
+          {
+            x: "3/3/23",
+            open: 15,
+            close: 20,
+            high: 22,
+            low: 10,
+            label: "C",
+          },
+          {
+            x: "3/4/23",
+            open: 20,
+            close: 10,
+            high: 25,
+            low: 7,
+            label: "D",
+          },
+          {
+            x: "3/5/23",
+            open: 10,
+            close: 8,
+            high: 15,
+            low: 5,
+            label: "E",
+          },
+        ]}
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/errorbar.tsx b/website/src/pages/themes/_components/examples/errorbar.tsx
new file mode 100644
index 000000000..a0a48b42c
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/errorbar.tsx
@@ -0,0 +1,23 @@
+/* eslint-disable no-magic-numbers */
+import React from "react";
+import { VictoryErrorBar } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const ErrorBarExamples: ExampleConfig[] = [
+  {
+    title: "VictoryErrorBar",
+    content: (props) => (
+      <VictoryErrorBar
+        {...props}
+        data={[
+          { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 },
+          { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 },
+          { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] },
+          { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 },
+          { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 },
+        ]}
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/example.ts b/website/src/pages/themes/_components/examples/example.ts
new file mode 100644
index 000000000..48a1ef537
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/example.ts
@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+import { ColorScalePropType, VictoryThemeDefinition } from "victory";
+
+type ExampleRenderProps = {
+  colorScale: ColorScalePropType;
+  labels: ({ datum }: { datum: any }) => string;
+  labelComponent?: ReactElement | undefined;
+  theme: VictoryThemeDefinition;
+};
+
+export type ExampleConfig = {
+  title: string;
+  content: (props: ExampleRenderProps) => ReactElement;
+  hasVictoryChart?: boolean;
+};
diff --git a/website/src/pages/themes/_components/examples/group.tsx b/website/src/pages/themes/_components/examples/group.tsx
new file mode 100644
index 000000000..a1579983b
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/group.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const GroupExamples: ExampleConfig[] = [
+  {
+    title: "VictoryGroup",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" />
+        <VictoryAxis dependentAxis label="Y Axis" />
+        <VictoryGroup domainPadding={{ x: 20 }} offset={20}>
+          <VictoryBar
+            {...props}
+            data={[
+              { x: "2023 Q1", y: 1 },
+              { x: "2023 Q2", y: 2 },
+              { x: "2023 Q3", y: 3 },
+              { x: "2023 Q4", y: 2 },
+            ]}
+          />
+          <VictoryBar
+            {...props}
+            data={[
+              { x: "2023 Q1", y: 2 },
+              { x: "2023 Q2", y: 3 },
+              { x: "2023 Q3", y: 4 },
+              { x: "2023 Q4", y: 5 },
+            ]}
+          />
+          <VictoryBar
+            {...props}
+            data={[
+              { x: "2023 Q1", y: 1 },
+              { x: "2023 Q2", y: 2 },
+              { x: "2023 Q3", y: 3 },
+              { x: "2023 Q4", y: 4 },
+            ]}
+          />
+        </VictoryGroup>
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/histogram.tsx b/website/src/pages/themes/_components/examples/histogram.tsx
new file mode 100644
index 000000000..6e147dd63
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/histogram.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { VictoryHistogram } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const HistogramExamples: ExampleConfig[] = [
+  {
+    title: "VictoryHistogram",
+    content: (props) => (
+      <VictoryHistogram
+        {...props}
+        data={[
+          { x: 0 },
+          { x: 1 },
+          { x: 1 },
+          { x: 1 },
+          { x: 1 },
+          { x: 2 },
+          { x: 2 },
+          { x: 3 },
+          { x: 4 },
+          { x: 7 },
+          { x: 7 },
+          { x: 10 },
+        ]}
+        labels={({ datum }) => `Bin count:\n ${datum.x}`}
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/index.ts b/website/src/pages/themes/_components/examples/index.ts
new file mode 100644
index 000000000..b15bc9c59
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/index.ts
@@ -0,0 +1,53 @@
+import { AreaExamples } from "./area";
+import { AxisExamples } from "./axis";
+import { BarExamples } from "./bar";
+import { BoxPlotExamples } from "./box-plot";
+import { CandlestickExamples } from "./candlestick";
+import { ErrorBarExamples } from "./errorbar";
+import { GroupExamples } from "./group";
+import { HistogramExamples } from "./histogram";
+import { LineExamples } from "./line";
+import { PieExamples } from "./pie";
+import { PolarAxisExamples } from "./polar-axis";
+import { PolarAxisDependentExamples } from "./polar-axis-dependent";
+import { ScatterExamples } from "./scatter";
+import { StackExamples } from "./stack";
+import { VoronoiExamples } from "./voronoi";
+
+// NOTE: these are ordered specifically for the previews
+//       to show the most common examples first
+export const AllExamples = [
+  ...AreaExamples,
+  ...BarExamples,
+  ...GroupExamples,
+  ...LineExamples,
+  ...PieExamples,
+  ...StackExamples,
+  ...BoxPlotExamples,
+  ...CandlestickExamples,
+  ...ErrorBarExamples,
+  ...HistogramExamples,
+  ...ScatterExamples,
+  ...VoronoiExamples,
+  ...AxisExamples,
+  ...PolarAxisExamples,
+  ...PolarAxisDependentExamples,
+];
+
+export * from "./area";
+export * from "./axis";
+export * from "./bar";
+export * from "./box-plot";
+export * from "./candlestick";
+export * from "./errorbar";
+export * from "./example";
+export * from "./group";
+export * from "./histogram";
+export * from "./legend";
+export * from "./line";
+export * from "./pie";
+export * from "./polar-axis";
+export * from "./polar-axis-dependent";
+export * from "./scatter";
+export * from "./stack";
+export * from "./voronoi";
diff --git a/website/src/pages/themes/_components/examples/legend.tsx b/website/src/pages/themes/_components/examples/legend.tsx
new file mode 100644
index 000000000..87bf1f113
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/legend.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { VictoryBar, VictoryChart, VictoryLegend } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const LegendExamples: ExampleConfig[] = [
+  {
+    title: "VictoryLegend",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryLegend
+          {...props}
+          x={125}
+          y={20}
+          title="Pets"
+          data={[
+            {
+              name: "Dogs",
+              symbol: { fill: "tomato" },
+            },
+            {
+              name: "Cats",
+              symbol: { fill: "orange" },
+            },
+            {
+              name: "Rabbits",
+              symbol: { fill: "gold" },
+            },
+          ]}
+        />
+        <VictoryBar
+          data={[
+            {
+              x: "Dogs",
+              y: 6,
+              fill: "tomato",
+            },
+            {
+              x: "Cats",
+              y: 4,
+              fill: "orange",
+            },
+            {
+              x: "Rabbits",
+              y: 2,
+              fill: "gold",
+            },
+          ]}
+          style={{
+            data: {
+              fill: ({ datum }) => datum.fill,
+            },
+          }}
+        />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/line.tsx b/website/src/pages/themes/_components/examples/line.tsx
new file mode 100644
index 000000000..2b231c764
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/line.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { VictoryAxis, VictoryChart, VictoryLine } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const LineExamples: ExampleConfig[] = [
+  {
+    title: "VictoryLine",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" />
+        <VictoryAxis dependentAxis label="Y Axis" />
+        <VictoryLine
+          {...props}
+          data={[
+            { x: 1, y: 2 },
+            { x: 2, y: 3 },
+            { x: 3, y: 5 },
+            { x: 4, y: 4 },
+            { x: 5, y: 7 },
+          ]}
+          labels={({ datum }) => datum.y}
+        />
+        ,
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/pie.tsx b/website/src/pages/themes/_components/examples/pie.tsx
new file mode 100644
index 000000000..9e4609f59
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/pie.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { VictoryPie } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const PieExamples: ExampleConfig[] = [
+  {
+    title: "VictoryPie",
+    content: (props) => (
+      <VictoryPie
+        {...props}
+        data={[
+          { x: "Cats", y: 35 },
+          { x: "Dogs", y: 40 },
+          { x: "Birds", y: 55 },
+          { x: "Fishes", y: 15 },
+          { x: "Reptiles", y: 10 },
+        ]}
+      />
+    ),
+    hasVictoryChart: false,
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx b/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
new file mode 100644
index 000000000..6d470155c
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/polar-axis-dependent.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable no-magic-numbers */
+import React from "react";
+import { VictoryChart, VictoryPolarAxis } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const PolarAxisDependentExamples: ExampleConfig[] = [
+  {
+    title: "VictoryPolarAxis - Dependent",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryPolarAxis
+          {...props}
+          dependentAxis
+          domain={[0, 10]}
+          standalone={false}
+        />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/polar-axis.tsx b/website/src/pages/themes/_components/examples/polar-axis.tsx
new file mode 100644
index 000000000..aedd3efc5
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/polar-axis.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { VictoryChart, VictoryPolarAxis } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const PolarAxisExamples: ExampleConfig[] = [
+  {
+    title: "VictoryPolarAxis",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryPolarAxis {...props} standalone={false} />
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/scatter.tsx b/website/src/pages/themes/_components/examples/scatter.tsx
new file mode 100644
index 000000000..b2fa3b54b
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/scatter.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { VictoryScatter } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const ScatterExamples: ExampleConfig[] = [
+  {
+    title: "VictoryScatter",
+    content: (props) => (
+      <VictoryScatter
+        {...props}
+        data={[
+          { x: 1, y: 2 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 4 },
+          { x: 5, y: 7 },
+        ]}
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/stack.tsx b/website/src/pages/themes/_components/examples/stack.tsx
new file mode 100644
index 000000000..a68074d8e
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/stack.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { VictoryArea, VictoryAxis, VictoryChart, VictoryStack } from "victory";
+import { NUM_STACKS, sampleStackData } from "../../_const";
+
+import { ExampleConfig } from "./example";
+
+export const StackExamples: ExampleConfig[] = [
+  {
+    title: "VictoryStack",
+    content: (props) => (
+      <VictoryChart theme={props.theme} domainPadding={20}>
+        <VictoryAxis label="X Axis" />
+        <VictoryAxis dependentAxis label="Y Axis" />
+        <VictoryStack
+          {...props}
+          key="victory-stack"
+          colorScale={props.colorScale}
+        >
+          {[...Array(NUM_STACKS)].map((_, i) => (
+            <VictoryArea data={sampleStackData} key={i} />
+          ))}
+        </VictoryStack>
+      </VictoryChart>
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/examples/voronoi.tsx b/website/src/pages/themes/_components/examples/voronoi.tsx
new file mode 100644
index 000000000..bc57e3e8a
--- /dev/null
+++ b/website/src/pages/themes/_components/examples/voronoi.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { VictoryVoronoi } from "victory";
+
+import { ExampleConfig } from "./example";
+
+export const VoronoiExamples: ExampleConfig[] = [
+  {
+    title: "VictoryVoronoi",
+    content: (props) => (
+      <VictoryVoronoi
+        {...props}
+        data={[
+          { x: 1, y: 2 },
+          { x: 2, y: 3 },
+          { x: 3, y: 5 },
+          { x: 4, y: 4 },
+          { x: 5, y: 7 },
+        ]}
+      />
+    ),
+  },
+];
diff --git a/website/src/pages/themes/_components/preview-settings-menu.tsx b/website/src/pages/themes/_components/preview-settings-menu.tsx
deleted file mode 100644
index 0c32511e7..000000000
--- a/website/src/pages/themes/_components/preview-settings-menu.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import Select from "./select";
-import { usePreviewOptions } from "../_providers/previewOptionsProvider";
-import { colorScaleOptions } from "../_const";
-import { FiSettings, FiX } from "react-icons/fi";
-import Toggle from "./toggle";
-
-type PreviewSettingsMenuProps = {
-  showColorScaleOptions: boolean;
-};
-
-const PreviewSettingsMenu = ({
-  showColorScaleOptions = false,
-}: PreviewSettingsMenuProps) => {
-  const [isSettingsMenuOpen, setIsSettingsMenuOpen] = React.useState(false);
-  const { colorScale, updateColorScale, showTooltips, setShowTooltips } =
-    usePreviewOptions();
-
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-      setIsSettingsMenuOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isSettingsMenuOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isSettingsMenuOpen]);
-
-  const handleSettingsMenuToggle = () => {
-    setIsSettingsMenuOpen((prev) => !prev);
-  };
-
-  return (
-    <div className="relative">
-      <button
-        onClick={handleSettingsMenuToggle}
-        className="bg-transparent flex justify-center items-center cursor-pointer text-grayscale-800 hover:text-grayscale-400"
-      >
-        <FiSettings className="w-4 h-4" />
-      </button>
-      {isSettingsMenuOpen && (
-        <div
-          className="absolute w-[400px] right-0 top-6 border border-grayscale-300 bg-white rounded-md z-50 p-4 shadow-md"
-          ref={menuRef}
-        >
-          <button
-            onClick={handleSettingsMenuToggle}
-            className="absolute top-2 right-2 flex items-center justify-center p-1 rounded-full bg-grayscale-100 cursor-pointer"
-          >
-            <FiX className="w-4 h-4 text-grayscale-800" />
-          </button>
-          <h1 className="text-base font-bold mb-4">Preview Settings</h1>
-          {showColorScaleOptions && (
-            <Select
-              id="color-scale-preview"
-              label="Preview color scale"
-              value={colorScale}
-              onChange={updateColorScale}
-              options={colorScaleOptions}
-              includeDefault
-              className="flex items-center justify-between my-2"
-              size="sm"
-            />
-          )}
-          <Toggle
-            id="show-tooltips"
-            label="Show tooltips instead of labels"
-            checked={showTooltips}
-            onChange={setShowTooltips}
-            className="mt-4"
-            size="sm"
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-export default PreviewSettingsMenu;
diff --git a/website/src/pages/themes/_components/sidenav.tsx b/website/src/pages/themes/_components/sidenav.tsx
index 4f2949697..d459b0d26 100644
--- a/website/src/pages/themes/_components/sidenav.tsx
+++ b/website/src/pages/themes/_components/sidenav.tsx
@@ -17,14 +17,15 @@ import axisOptionsConfig from "../_config/axis";
 import { useTheme } from "../_providers/themeProvider";
 import {
   defaultColorScale,
-  defaultExampleConfigs,
   usePreviewOptions,
 } from "../_providers/previewOptionsProvider";
 import { TiExportOutline } from "react-icons/ti";
+import { AllExamples, ExampleConfig, StackExamples } from "./examples";
 
 type NavItem = {
   title: string;
   icon: React.ElementType;
+  content: ExampleConfig[];
 } & (
   | {
       panelType: "theme" | "export";
@@ -49,30 +50,35 @@ export const NAV_ITEMS: NavItem[] = [
     title: "Base Theme",
     icon: CircleStackIcon,
     panelType: "theme",
+    content: AllExamples,
   },
   {
     title: "Color Palette",
     icon: SwatchIcon,
     config: paletteOptionsConfig,
     panelType: "default",
+    content: StackExamples,
   },
   {
     title: "Global Options",
     icon: GlobeAmericasIcon,
     config: globalOptionsConfig,
     panelType: "default",
+    content: AllExamples,
   },
   {
     title: "Axis Options",
     icon: AdjustmentsVerticalIcon,
     config: axisOptionsConfig,
     panelType: "chart",
+    content: [],
   },
   {
     title: "Chart Options",
     icon: AdjustmentsVerticalIcon,
     config: chartOptionsConfig,
     panelType: "chart",
+    content: [],
   },
 ];
 
@@ -80,17 +86,18 @@ const exportItem: NavItem = {
   title: "Export",
   icon: TiExportOutline,
   panelType: "export",
+  content: [],
 };
 
 const SideNav = ({ activeItem, onItemSelect }: SideNavProps) => {
   const { baseTheme } = useTheme();
-  const { setExampleConfigs, updateColorScale } = usePreviewOptions();
+  const { setExampleContent, updateColorScale } = usePreviewOptions();
   const isBaseThemeSelected = !!baseTheme;
 
   const handleItemSelect = (item: NavItem) => {
     onItemSelect(item);
     updateColorScale(defaultColorScale);
-    setExampleConfigs(defaultExampleConfigs);
+    setExampleContent(item.content);
   };
 
   const isExportItemActive = activeItem.title === exportItem.title;
diff --git a/website/src/pages/themes/_components/theme-preview.tsx b/website/src/pages/themes/_components/theme-preview.tsx
deleted file mode 100644
index 7fe1c6660..000000000
--- a/website/src/pages/themes/_components/theme-preview.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from "react";
-import {
-  ColorScalePropType,
-  VictoryArea,
-  VictoryAxis,
-  VictoryBar,
-  VictoryChart,
-  VictoryStack,
-  VictoryTooltip,
-} from "victory";
-import { useTheme } from "../_providers/themeProvider";
-import { usePreviewOptions } from "../_providers/previewOptionsProvider";
-import { NUM_STACKS, sampleStackData } from "../_const";
-import clsx from "clsx";
-import PreviewSettingsMenu from "./preview-settings-menu";
-
-const chartStyle: { [key: string]: React.CSSProperties } = {
-  parent: {
-    border: "1px solid #ccc",
-    width: "100%",
-    height: "95%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-};
-
-const ThemePreview = () => {
-  const { customThemeConfig } = useTheme();
-  const { colorScale, showTooltips, exampleConfigs } = usePreviewOptions();
-
-  if (!customThemeConfig) return null;
-
-  const showColorScaleOptions =
-    exampleConfigs.length === 0 ||
-    exampleConfigs.filter(
-      ({ allowColorScaleOverride }) => allowColorScaleOverride,
-    ).length > 0;
-
-  return (
-    <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
-      <div className="max-w-screen-xl w-full px-10 pt-6 pb-20">
-        <div className="flex justify-between items-center mb-6">
-          <h1 className="text-2xl font-bold m-0">Theme Preview</h1>
-          <PreviewSettingsMenu showColorScaleOptions={showColorScaleOptions} />
-        </div>
-        <div
-          className={clsx(
-            "grid grid-cols-1 gap-10",
-            exampleConfigs.length !== 1 && "xl:grid-cols-2",
-            exampleConfigs.length === 1
-              ? "auto-rows-[500px]"
-              : "auto-rows-[400px] xl:max-2xl:auto-rows-[300px]",
-          )}
-        >
-          {exampleConfigs.length === 0 ? (
-            <>
-              <div>
-                <h3 className="text-lg font-bold mb-3">Stacked Area Chart</h3>
-                <VictoryChart
-                  theme={customThemeConfig}
-                  domainPadding={20}
-                  style={chartStyle}
-                >
-                  <VictoryAxis label="X Axis" />
-                  <VictoryAxis dependentAxis label="Y Axis" />
-                  <VictoryStack
-                    colorScale={colorScale as ColorScalePropType}
-                    aria-label="Victory Stack Demo"
-                  >
-                    {[...Array(NUM_STACKS)].map((_, i) => (
-                      <VictoryArea data={sampleStackData} key={i} />
-                    ))}
-                  </VictoryStack>
-                </VictoryChart>
-              </div>
-              <div>
-                <h3 className="text-lg font-bold mb-3">Stacked Bar Chart</h3>
-                <VictoryChart
-                  theme={customThemeConfig}
-                  domainPadding={20}
-                  style={chartStyle}
-                >
-                  <VictoryAxis label="X Axis" />
-                  <VictoryAxis dependentAxis label="Y Axis" />
-                  <VictoryStack
-                    colorScale={colorScale as ColorScalePropType}
-                    aria-label="Victory Stack Demo"
-                  >
-                    {[...Array(NUM_STACKS)].map((_, i) => (
-                      <VictoryBar
-                        data={sampleStackData}
-                        key={i}
-                        labels={({ datum }) =>
-                          showTooltips ? datum.y : undefined
-                        }
-                        {...(showTooltips && {
-                          labelComponent: <VictoryTooltip />,
-                        })}
-                      />
-                    ))}
-                  </VictoryStack>
-                </VictoryChart>
-              </div>
-            </>
-          ) : (
-            exampleConfigs.map(
-              ({ label, content: Content, hasVictoryChart = true }, i) =>
-                Content && (
-                  <div key={i}>
-                    <h3 className="text-lg font-bold mb-3">{label}</h3>
-                    {hasVictoryChart ? (
-                      <VictoryChart
-                        theme={customThemeConfig}
-                        domainPadding={20}
-                        style={chartStyle}
-                      >
-                        {Content({
-                          labels: ({ datum }) => datum.y || datum.x,
-                          colorScale: colorScale as ColorScalePropType,
-                          ...(showTooltips && {
-                            labelComponent: <VictoryTooltip />,
-                          }),
-                        })}
-                      </VictoryChart>
-                    ) : (
-                      Content({
-                        labels: ({ datum }) => datum.y || datum.x,
-                        colorScale: colorScale as ColorScalePropType,
-                        style: chartStyle,
-                        theme: customThemeConfig,
-                        ...(showTooltips && {
-                          labelComponent: <VictoryTooltip />,
-                        }),
-                      })
-                    )}
-                  </div>
-                ),
-            )
-          )}
-        </div>
-      </div>
-    </main>
-  );
-};
-export default ThemePreview;
diff --git a/website/src/pages/themes/_components/theme-preview/header.tsx b/website/src/pages/themes/_components/theme-preview/header.tsx
new file mode 100644
index 000000000..3cf03de7a
--- /dev/null
+++ b/website/src/pages/themes/_components/theme-preview/header.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+import { Button } from "@site/src/components/button";
+import { useClickOutside } from "@site/src/hooks/useClickOutside";
+import { Options } from "./options";
+
+export function Header() {
+  const [isSettingsMenuOpen, setIsSettingsMenuOpen] = useState(false);
+
+  const ref = useClickOutside(() => {
+    setIsSettingsMenuOpen((prev) => !prev);
+  });
+
+  const handlePreviewClick = () => {
+    setIsSettingsMenuOpen((prev) => !prev);
+  };
+
+  return (
+    <div className="border-b border-gray-200 pb-3 mb-6 sm:flex sm:items-center sm:justify-between">
+      <h3 className="mb-0 font-semibold text-gray-900">Chart Previews</h3>
+      <div className="mt-3 sm:ml-4 sm:mt-0">
+        <Button onClick={handlePreviewClick}>Preview Options</Button>
+        <Options isOpen={isSettingsMenuOpen} ref={ref} />
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/pages/themes/_components/theme-preview/index.tsx b/website/src/pages/themes/_components/theme-preview/index.tsx
new file mode 100644
index 000000000..37279970c
--- /dev/null
+++ b/website/src/pages/themes/_components/theme-preview/index.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+import { ColorScalePropType } from "victory";
+
+import { useTheme } from "../../_providers/themeProvider";
+import { usePreviewOptions } from "../../_providers/previewOptionsProvider";
+import { Preview } from "./preview";
+import { Header } from "./header";
+
+export function ThemePreview() {
+  const { customThemeConfig } = useTheme();
+  const { colorScale, exampleContent, showTooltips } = usePreviewOptions();
+
+  if (!customThemeConfig) return null;
+
+  return (
+    <main className="flex-1 flex flex-col items-center overflow-y-auto h-full">
+      <div className="max-w-screen-xl w-full px-10 pt-6 pb-20">
+        <Header />
+        <div className="grid grid-cols-1 gap-10 xl:grid-cols-2">
+          {exampleContent.map((content, i) => (
+            <Preview
+              key={i}
+              config={content}
+              colorScale={colorScale as ColorScalePropType}
+              showTooltips={showTooltips}
+              theme={customThemeConfig}
+            />
+          ))}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/website/src/pages/themes/_components/theme-preview/options.tsx b/website/src/pages/themes/_components/theme-preview/options.tsx
new file mode 100644
index 000000000..22de5f76a
--- /dev/null
+++ b/website/src/pages/themes/_components/theme-preview/options.tsx
@@ -0,0 +1,45 @@
+import React, { forwardRef } from "react";
+import Select from "../select";
+import { usePreviewOptions } from "../../_providers/previewOptionsProvider";
+import { colorScaleOptions } from "../../_const";
+import Toggle from "../toggle";
+
+type Props = {
+  isOpen: boolean;
+};
+
+export const Options = forwardRef<HTMLDivElement, Props>(({ isOpen }, ref) => {
+  const { colorScale, updateColorScale, showTooltips, setShowTooltips } =
+    usePreviewOptions();
+
+  return (
+    <div className="relative">
+      {isOpen && (
+        <div
+          className="absolute w-[400px] right-0 mt-1 border border-grayscale-300 bg-white rounded-md z-50 p-4 shadow-md"
+          ref={ref}
+        >
+          <h1 className="text-base font-bold mb-4">Preview Settings</h1>
+          <Select
+            id="color-scale-preview"
+            label="Preview color scale"
+            value={colorScale}
+            onChange={updateColorScale}
+            options={colorScaleOptions}
+            includeDefault
+            className="flex items-center justify-between my-2"
+            size="sm"
+          />
+          <Toggle
+            id="show-tooltips"
+            label="Show tooltips instead of labels"
+            checked={showTooltips}
+            onChange={setShowTooltips}
+            className="mt-4"
+            size="sm"
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/website/src/pages/themes/_components/theme-preview/preview.tsx b/website/src/pages/themes/_components/theme-preview/preview.tsx
new file mode 100644
index 000000000..92790b187
--- /dev/null
+++ b/website/src/pages/themes/_components/theme-preview/preview.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import {
+  ColorScalePropType,
+  VictoryThemeDefinition,
+  VictoryTooltip,
+} from "victory";
+import { ExampleConfig } from "../examples";
+
+type Props = {
+  config: ExampleConfig;
+  theme: VictoryThemeDefinition;
+  colorScale: ColorScalePropType;
+  showTooltips: boolean;
+};
+
+export function Preview({ config, theme, colorScale, showTooltips }: Props) {
+  const { content: Content, title } = config;
+
+  return (
+    <div className="border border-solid border-gray-200 p-8">
+      <h3 className="text-lg font-bold mb-3">{title}</h3>
+      {Content({
+        labels: ({ datum }) => datum.y || datum.x,
+        colorScale: colorScale as ColorScalePropType,
+        theme,
+        ...(showTooltips && {
+          labelComponent: <VictoryTooltip />,
+        }),
+      })}
+    </div>
+  );
+}
diff --git a/website/src/pages/themes/_config/axis.tsx b/website/src/pages/themes/_config/axis.tsx
index 815aabc16..83f258804 100644
--- a/website/src/pages/themes/_config/axis.tsx
+++ b/website/src/pages/themes/_config/axis.tsx
@@ -1,17 +1,16 @@
-/* eslint-disable no-magic-numbers */
-import React from "react";
 import { getBaseLabelsConfig, getBaseStrokeConfig } from "../_utils";
-import { VictoryAxis, VictoryPolarAxis } from "victory";
 import { StrokeProps } from "../_const";
 import { ControlConfig } from ".";
+import {
+  AxisExamples,
+  PolarAxisExamples,
+  PolarAxisDependentExamples,
+} from "../_components/examples";
 
 const generalAxisOptionsConfig: ControlConfig = {
   type: "accordion",
   label: "Base Axis",
-  content: (props) => [
-    <VictoryAxis key="x-axis" label="X Axis" {...props} />,
-    <VictoryAxis key="y-axis" dependentAxis label="Y Axis" {...props} />,
-  ],
+  content: AxisExamples,
   controls: [
     {
       type: "section",
@@ -57,9 +56,7 @@ const generalAxisOptionsConfig: ControlConfig = {
 const polarAxisOptionsConfig: ControlConfig = {
   type: "accordion",
   label: "Polar Axis",
-  content: (props) => (
-    <VictoryPolarAxis {...props} key="polar-axis" standalone={false} />
-  ),
+  content: PolarAxisExamples,
   controls: [
     {
       type: "section",
@@ -105,15 +102,7 @@ const polarAxisOptionsConfig: ControlConfig = {
 const polarDependentAxisOptionsConfig: ControlConfig = {
   type: "accordion",
   label: "Polar Dependent Axis",
-  content: (props) => (
-    <VictoryPolarAxis
-      {...props}
-      key="polar-axis-dependent"
-      dependentAxis
-      domain={[0, 10]}
-      standalone={false}
-    />
-  ),
+  content: PolarAxisDependentExamples,
   controls: [
     {
       type: "section",
diff --git a/website/src/pages/themes/_config/chart.tsx b/website/src/pages/themes/_config/chart.tsx
index f64852ec8..797364f6e 100644
--- a/website/src/pages/themes/_config/chart.tsx
+++ b/website/src/pages/themes/_config/chart.tsx
@@ -1,28 +1,25 @@
-/* eslint-disable no-magic-numbers */
-import React from "react";
-import {
-  VictoryArea,
-  VictoryAxis,
-  VictoryBar,
-  VictoryBoxPlot,
-  VictoryCandlestick,
-  VictoryErrorBar,
-  VictoryGroup,
-  VictoryHistogram,
-  VictoryLegend,
-  VictoryLine,
-  VictoryPie,
-  VictoryScatter,
-  VictoryStack,
-  VictoryVoronoi,
-} from "victory";
 import {
   getBaseLabelsConfig,
   getBaseStrokeConfig,
   getNestedColorScaleConfig,
 } from "../_utils";
 import { ControlConfig } from ".";
-import { NUM_STACKS, sampleStackData, StrokeProps } from "../_const";
+import { StrokeProps } from "../_const";
+import {
+  AreaExamples,
+  BarExamples,
+  BoxPlotExamples,
+  CandlestickExamples,
+  ErrorBarExamples,
+  GroupExamples,
+  HistogramExamples,
+  LegendExamples,
+  LineExamples,
+  PieExamples,
+  ScatterExamples,
+  StackExamples,
+  VoronoiExamples,
+} from "../_components/examples";
 
 const chartConfigs: {
   [key: string]: ControlConfig;
@@ -30,21 +27,7 @@ const chartConfigs: {
   area: {
     type: "section",
     label: "Area Chart",
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryArea
-        {...props}
-        key="area-chart"
-        data={[
-          { x: 1, y: 2, label: "A" },
-          { x: 2, y: 3, label: "B" },
-          { x: 3, y: 5, label: "C" },
-          { x: 4, y: 4, label: "D" },
-          { x: 5, y: 7, label: "E" },
-        ]}
-      />,
-    ],
+    content: AreaExamples,
     controls: [
       {
         type: "section",
@@ -79,36 +62,7 @@ const chartConfigs: {
   bar: {
     type: "section",
     label: "Bar Chart",
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryBar
-        {...props}
-        key="bar-chart"
-        data={[
-          {
-            x: 1,
-            y: 2,
-          },
-          {
-            x: 2,
-            y: 3,
-          },
-          {
-            x: 3,
-            y: 5,
-          },
-          {
-            x: 4,
-            y: 4,
-          },
-          {
-            x: 5,
-            y: 7,
-          },
-        ]}
-      />,
-    ],
+    content: BarExamples,
     controls: [
       {
         type: "section",
@@ -150,20 +104,7 @@ const chartConfigs: {
   boxPlot: {
     type: "section",
     label: "Box Plot",
-    content: (props) => (
-      <VictoryBoxPlot
-        {...props}
-        data={[
-          { x: 1, y: [1, 2, 3, 5, 8] },
-          { x: 2, y: [3, 2, 8, 10, 12] },
-          { x: 3, y: [2, 8, 6, 5, 10] },
-          { x: 4, y: [1, 3, 2, 9, 5] },
-          { x: 5, y: [3, 2, 9, 5, 7] },
-        ]}
-        labels
-        labelOrientation="right"
-      />
-    ),
+    content: BoxPlotExamples,
     controls: [
       {
         type: "section",
@@ -251,53 +192,7 @@ const chartConfigs: {
   candlestick: {
     type: "section",
     label: "Candlestick Chart",
-    content: (props) => (
-      <VictoryCandlestick
-        {...props}
-        data={[
-          {
-            x: "3/1/23",
-            open: 5,
-            close: 10,
-            high: 15,
-            low: 0,
-            label: "A",
-          },
-          {
-            x: "3/2/23",
-            open: 10,
-            close: 15,
-            high: 20,
-            low: 5,
-            label: "B",
-          },
-          {
-            x: "3/3/23",
-            open: 15,
-            close: 20,
-            high: 22,
-            low: 10,
-            label: "C",
-          },
-          {
-            x: "3/4/23",
-            open: 20,
-            close: 10,
-            high: 25,
-            low: 7,
-            label: "D",
-          },
-          {
-            x: "3/5/23",
-            open: 10,
-            close: 8,
-            high: 15,
-            low: 5,
-            label: "E",
-          },
-        ]}
-      />
-    ),
+    content: CandlestickExamples,
     controls: [
       {
         type: "section",
@@ -350,18 +245,7 @@ const chartConfigs: {
   errorBar: {
     type: "section",
     label: "Error Bar",
-    content: (props) => (
-      <VictoryErrorBar
-        {...props}
-        data={[
-          { x: 1, y: 1, errorX: [1, 0.5], errorY: 0.1 },
-          { x: 2, y: 2, errorX: [1, 3], errorY: 0.1 },
-          { x: 3, y: 3, errorX: [1, 3], errorY: [0.2, 0.3] },
-          { x: 4, y: 2, errorX: [1, 0.5], errorY: 0.1 },
-          { x: 5, y: 1, errorX: [1, 0.5], errorY: 0.2 },
-        ]}
-      />
-    ),
+    content: ErrorBarExamples,
     controls: [
       {
         type: "section",
@@ -392,26 +276,7 @@ const chartConfigs: {
   histogram: {
     type: "section",
     label: "Histogram",
-    content: (props) => (
-      <VictoryHistogram
-        {...props}
-        data={[
-          { x: 0 },
-          { x: 1 },
-          { x: 1 },
-          { x: 1 },
-          { x: 1 },
-          { x: 2 },
-          { x: 2 },
-          { x: 3 },
-          { x: 4 },
-          { x: 7 },
-          { x: 7 },
-          { x: 10 },
-        ]}
-        labels={({ datum }) => `Bin count:\n ${datum.x}`}
-      />
-    ),
+    content: HistogramExamples,
     controls: [
       {
         type: "section",
@@ -458,39 +323,7 @@ const chartConfigs: {
     type: "section",
     label: "Group",
     allowColorScaleOverride: true,
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryGroup key="victory-group" domainPadding={{ x: 20 }} offset={20}>
-        <VictoryBar
-          {...props}
-          data={[
-            { x: "2023 Q1", y: 1 },
-            { x: "2023 Q2", y: 2 },
-            { x: "2023 Q3", y: 3 },
-            { x: "2023 Q4", y: 2 },
-          ]}
-        />
-        <VictoryBar
-          {...props}
-          data={[
-            { x: "2023 Q1", y: 2 },
-            { x: "2023 Q2", y: 3 },
-            { x: "2023 Q3", y: 4 },
-            { x: "2023 Q4", y: 5 },
-          ]}
-        />
-        <VictoryBar
-          {...props}
-          data={[
-            { x: "2023 Q1", y: 1 },
-            { x: "2023 Q2", y: 2 },
-            { x: "2023 Q3", y: 3 },
-            { x: "2023 Q4", y: 4 },
-          ]}
-        />
-      </VictoryGroup>,
-    ],
+    content: GroupExamples,
     controls: [
       {
         type: "section",
@@ -512,54 +345,7 @@ const chartConfigs: {
   legend: {
     type: "section",
     label: "Legend",
-    content: (props) => [
-      <VictoryLegend
-        {...props}
-        key="legend"
-        x={125}
-        y={20}
-        title="Pets"
-        data={[
-          {
-            name: "Dogs",
-            symbol: { fill: "tomato" },
-          },
-          {
-            name: "Cats",
-            symbol: { fill: "orange" },
-          },
-          {
-            name: "Rabbits",
-            symbol: { fill: "gold" },
-          },
-        ]}
-      />,
-      <VictoryBar
-        key="legend-chart"
-        data={[
-          {
-            x: "Dogs",
-            y: 6,
-            fill: "tomato",
-          },
-          {
-            x: "Cats",
-            y: 4,
-            fill: "orange",
-          },
-          {
-            x: "Rabbits",
-            y: 2,
-            fill: "gold",
-          },
-        ]}
-        style={{
-          data: {
-            fill: ({ datum }) => datum.fill,
-          },
-        }}
-      />,
-    ],
+    content: LegendExamples,
     controls: [
       {
         type: "section",
@@ -637,22 +423,7 @@ const chartConfigs: {
   line: {
     type: "section",
     label: "Line Chart",
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryLine
-        key="line-chart"
-        {...props}
-        data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
-        ]}
-        labels={({ datum }) => datum.y}
-      />,
-    ],
+    content: LineExamples,
     controls: [
       {
         type: "section",
@@ -675,19 +446,7 @@ const chartConfigs: {
     type: "section",
     label: "Pie Chart",
     allowColorScaleOverride: true,
-    hasVictoryChart: false,
-    content: (props) => (
-      <VictoryPie
-        {...props}
-        data={[
-          { x: "Cats", y: 35 },
-          { x: "Dogs", y: 40 },
-          { x: "Birds", y: 55 },
-          { x: "Fishes", y: 15 },
-          { x: "Reptiles", y: 10 },
-        ]}
-      />
-    ),
+    content: PieExamples,
     controls: [
       {
         type: "section",
@@ -718,18 +477,7 @@ const chartConfigs: {
   scatter: {
     type: "section",
     label: "Scatter Chart",
-    content: (props) => (
-      <VictoryScatter
-        {...props}
-        data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
-        ]}
-      />
-    ),
+    content: ScatterExamples,
     controls: [
       {
         type: "section",
@@ -765,20 +513,7 @@ const chartConfigs: {
     type: "section",
     label: "Stack",
     allowColorScaleOverride: true,
-    content: (props) => [
-      <VictoryAxis key="x-axis" label="X Axis" />,
-      <VictoryAxis key="y-axis" dependentAxis label="Y Axis" />,
-      <VictoryStack
-        {...props}
-        key="victory-stack"
-        colorScale={props.colorScale}
-        data-testColorScale={props.colorScale}
-      >
-        {[...Array(NUM_STACKS)].map((_, i) => (
-          <VictoryArea data={sampleStackData} key={i} />
-        ))}
-      </VictoryStack>,
-    ],
+    content: StackExamples,
     controls: [
       {
         type: "section",
@@ -851,18 +586,7 @@ const chartConfigs: {
   voronoi: {
     type: "section",
     label: "Voronoi",
-    content: (props) => (
-      <VictoryVoronoi
-        {...props}
-        data={[
-          { x: 1, y: 2 },
-          { x: 2, y: 3 },
-          { x: 3, y: 5 },
-          { x: 4, y: 4 },
-          { x: 5, y: 7 },
-        ]}
-      />
-    ),
+    content: VoronoiExamples,
     controls: [
       {
         type: "section",
diff --git a/website/src/pages/themes/_config/index.tsx b/website/src/pages/themes/_config/index.tsx
index 7a9296da6..cc6f3ec9f 100644
--- a/website/src/pages/themes/_config/index.tsx
+++ b/website/src/pages/themes/_config/index.tsx
@@ -1,10 +1,9 @@
-import React from "react";
+import { ExampleConfig } from "../_components/examples";
 
 export type ControlConfig = {
   label: string;
-  content?: (props: any) => React.ReactNode;
+  content?: ExampleConfig[];
   controls?: ControlConfig[];
-  hasVictoryChart?: boolean;
   allowColorScaleOverride?: boolean;
 } & (
   | {
diff --git a/website/src/pages/themes/_providers/previewOptionsProvider.tsx b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
index 439221e51..4a60bd206 100644
--- a/website/src/pages/themes/_providers/previewOptionsProvider.tsx
+++ b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from "react";
-import { ControlConfig } from "../_config";
+import { AllExamples, ExampleConfig } from "../_components/examples";
 
 type PreviewOptionsContextType = {
   colorScale?: string;
@@ -7,13 +7,12 @@ type PreviewOptionsContextType = {
   showTooltips: boolean;
   setShowTooltips: (showTooltips: boolean) => void;
   resetPreviewOptions: () => void;
-  exampleConfigs: ControlConfig[];
-  setExampleConfigs: (exampleConfigs: any[]) => void;
+  exampleContent: ExampleConfig[];
+  setExampleContent: (content: ExampleConfig[]) => void;
 };
 
-export const defaultColorScale = undefined;
+export const defaultColorScale = "qualitative";
 export const defaultShowTooltips = false;
-export const defaultExampleConfigs = [];
 
 const PreviewOptionsContext = createContext<
   PreviewOptionsContextType | undefined
@@ -24,9 +23,7 @@ export const PreviewOptionsProvider = ({ children }) => {
     defaultColorScale,
   );
   const [showTooltips, setShowTooltips] = React.useState(defaultShowTooltips);
-  const [exampleConfigs, setExampleConfigs] = React.useState<any[]>(
-    defaultExampleConfigs,
-  );
+  const [exampleContent, setExampleContent] = React.useState(AllExamples);
 
   const updateColorScale = (newColorScale?: string) => {
     const updatedColorScale = !newColorScale ? undefined : newColorScale;
@@ -46,8 +43,8 @@ export const PreviewOptionsProvider = ({ children }) => {
         showTooltips,
         setShowTooltips,
         resetPreviewOptions,
-        exampleConfigs,
-        setExampleConfigs,
+        exampleContent,
+        setExampleContent,
       }}
     >
       {children}
diff --git a/website/src/pages/themes/index.tsx b/website/src/pages/themes/index.tsx
index deb8e4a3b..3cec6edf0 100644
--- a/website/src/pages/themes/index.tsx
+++ b/website/src/pages/themes/index.tsx
@@ -8,7 +8,7 @@ import BaseThemePanel from "./_components/base-theme-panel";
 import OptionsPanel from "./_components/options-panel";
 import ChartPanel from "./_components/chart-panel";
 import { ThemeProvider } from "./_providers/themeProvider";
-import ThemePreview from "./_components/theme-preview";
+import { ThemePreview } from "./_components/theme-preview";
 import { PreviewOptionsProvider } from "./_providers/previewOptionsProvider";
 import ExportPanel from "./_components/export-panel";
 

From 856db62bc117a3dcadff047671e22cf7e2b3565c Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Wed, 18 Dec 2024 14:40:11 -0600
Subject: [PATCH 2/4] Updates for panel

---
 .../src/pages/themes/_components/sidenav.tsx  | 10 ++++-
 website/src/pages/themes/_config/chart.tsx    |  3 --
 website/src/pages/themes/_config/index.tsx    |  1 -
 website/src/pages/themes/_config/palette.tsx  | 40 ++++++++++++++++---
 .../_providers/previewOptionsProvider.tsx     |  2 +-
 5 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/website/src/pages/themes/_components/sidenav.tsx b/website/src/pages/themes/_components/sidenav.tsx
index d459b0d26..b3072287a 100644
--- a/website/src/pages/themes/_components/sidenav.tsx
+++ b/website/src/pages/themes/_components/sidenav.tsx
@@ -20,7 +20,13 @@ import {
   usePreviewOptions,
 } from "../_providers/previewOptionsProvider";
 import { TiExportOutline } from "react-icons/ti";
-import { AllExamples, ExampleConfig, StackExamples } from "./examples";
+import {
+  AllExamples,
+  ExampleConfig,
+  GroupExamples,
+  PieExamples,
+  StackExamples,
+} from "./examples";
 
 type NavItem = {
   title: string;
@@ -57,7 +63,7 @@ export const NAV_ITEMS: NavItem[] = [
     icon: SwatchIcon,
     config: paletteOptionsConfig,
     panelType: "default",
-    content: StackExamples,
+    content: [...StackExamples, ...GroupExamples, ...PieExamples],
   },
   {
     title: "Global Options",
diff --git a/website/src/pages/themes/_config/chart.tsx b/website/src/pages/themes/_config/chart.tsx
index 797364f6e..5c50be22e 100644
--- a/website/src/pages/themes/_config/chart.tsx
+++ b/website/src/pages/themes/_config/chart.tsx
@@ -322,7 +322,6 @@ const chartConfigs: {
   group: {
     type: "section",
     label: "Group",
-    allowColorScaleOverride: true,
     content: GroupExamples,
     controls: [
       {
@@ -445,7 +444,6 @@ const chartConfigs: {
   pie: {
     type: "section",
     label: "Pie Chart",
-    allowColorScaleOverride: true,
     content: PieExamples,
     controls: [
       {
@@ -512,7 +510,6 @@ const chartConfigs: {
   stack: {
     type: "section",
     label: "Stack",
-    allowColorScaleOverride: true,
     content: StackExamples,
     controls: [
       {
diff --git a/website/src/pages/themes/_config/index.tsx b/website/src/pages/themes/_config/index.tsx
index cc6f3ec9f..6a86c05f5 100644
--- a/website/src/pages/themes/_config/index.tsx
+++ b/website/src/pages/themes/_config/index.tsx
@@ -4,7 +4,6 @@ export type ControlConfig = {
   label: string;
   content?: ExampleConfig[];
   controls?: ControlConfig[];
-  allowColorScaleOverride?: boolean;
 } & (
   | {
       type: "section" | "accordion";
diff --git a/website/src/pages/themes/_config/palette.tsx b/website/src/pages/themes/_config/palette.tsx
index 271e8d22a..4374a283c 100644
--- a/website/src/pages/themes/_config/palette.tsx
+++ b/website/src/pages/themes/_config/palette.tsx
@@ -1,16 +1,44 @@
 import { OptionsPanelConfig } from ".";
 import { colorScaleOptions } from "../_const";
+import { getNestedColorScaleConfig } from "../_utils";
 
 const paletteOptionsConfig: OptionsPanelConfig = {
   title: "Color Palette",
   description:
     "Select a color palette to apply it to the preview charts, then adjust individual colors in the palette to customize the theme.",
-  controls: colorScaleOptions.map((option) => ({
-    type: "colorPalette",
-    colorScaleType: option.value,
-    label: option.label,
-    value: option.value,
-  })),
+  controls: [
+    {
+      type: "section",
+      label: "Component Defaults",
+      controls: [
+        {
+          type: "accordion",
+          label: "VictoryStack",
+          controls: getNestedColorScaleConfig("stack"),
+        },
+        {
+          type: "accordion",
+          label: "VictoryGroup",
+          controls: getNestedColorScaleConfig("group"),
+        },
+        {
+          type: "accordion",
+          label: "VictoryPie",
+          controls: getNestedColorScaleConfig("pie"),
+        },
+      ],
+    },
+    {
+      type: "section",
+      label: "Color Palettes",
+      controls: colorScaleOptions.map((option) => ({
+        type: "colorPalette",
+        colorScaleType: option.value,
+        label: option.label,
+        value: option.value,
+      })),
+    },
+  ],
 };
 
 export default paletteOptionsConfig;
diff --git a/website/src/pages/themes/_providers/previewOptionsProvider.tsx b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
index 4a60bd206..fa1e22e7d 100644
--- a/website/src/pages/themes/_providers/previewOptionsProvider.tsx
+++ b/website/src/pages/themes/_providers/previewOptionsProvider.tsx
@@ -11,7 +11,7 @@ type PreviewOptionsContextType = {
   setExampleContent: (content: ExampleConfig[]) => void;
 };
 
-export const defaultColorScale = "qualitative";
+export const defaultColorScale = undefined;
 export const defaultShowTooltips = false;
 
 const PreviewOptionsContext = createContext<

From ef427a898c903e8e2a8031e4a78a782c1c1779fe Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Wed, 18 Dec 2024 15:51:20 -0500
Subject: [PATCH 3/4] fix(theme-builder): same id for all toggles bug

---
 .../themes/_components/color-scale-override-selector.tsx | 4 +++-
 website/src/pages/themes/_components/control.tsx         | 9 ++++++++-
 website/src/pages/themes/_components/options-panel.tsx   | 1 -
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index 343b02152..6fe015321 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -4,6 +4,7 @@ import clsx from "clsx";
 import Toggle from "./toggle";
 
 type ColorScaleOverrideSelectorProps = {
+  id: string;
   label?: string;
   value?: string | string[];
   onChange: (value: string[] | undefined) => void;
@@ -11,6 +12,7 @@ type ColorScaleOverrideSelectorProps = {
 };
 
 const ColorScaleOverrideSelector = ({
+  id,
   label = "Color Scale",
   value,
   onChange,
@@ -39,7 +41,7 @@ const ColorScaleOverrideSelector = ({
     <fieldset className={clsx("p-0 m-0", className)}>
       <label className="block mb-3 text-sm font-bold">{label}</label>
       <Toggle
-        id="color-scale-override-toggle"
+        id={id}
         label="Use custom color scale"
         checked={hasCustomValue}
         onChange={onCheckboxChange}
diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
index 060013973..843793439 100644
--- a/website/src/pages/themes/_components/control.tsx
+++ b/website/src/pages/themes/_components/control.tsx
@@ -14,7 +14,13 @@ export type ColorChangeArgs = {
   colorScale: string;
 };
 
-const Control = ({ type, control, className }) => {
+type ControlProps = {
+  type: string;
+  control: any;
+  className?: string;
+};
+
+const Control = ({ type, control, className }: ControlProps) => {
   const { customThemeConfig, updateCustomThemeConfig } = useTheme();
   const handleColorChange = ({
     newColor,
@@ -116,6 +122,7 @@ const Control = ({ type, control, className }) => {
     case "colorScale":
       return (
         <ColorScaleOverrideSelector
+          id={id}
           label={control.label}
           value={configValue as string}
           onChange={handleChange}
diff --git a/website/src/pages/themes/_components/options-panel.tsx b/website/src/pages/themes/_components/options-panel.tsx
index 34b9ca304..897fd2423 100644
--- a/website/src/pages/themes/_components/options-panel.tsx
+++ b/website/src/pages/themes/_components/options-panel.tsx
@@ -19,7 +19,6 @@ const OptionsPanel = ({
             key={control.label + i}
             type={control.type}
             control={control}
-            className="my-4"
           />
         );
       })}

From 2f565ca330815f24a2b448c5b9fb1cda326c7bbf Mon Sep 17 00:00:00 2001
From: Stef Williams <stef.williams@formidable.com>
Date: Fri, 20 Dec 2024 14:20:44 -0500
Subject: [PATCH 4/4] wip(theme-builder): new layout for color palette panel

---
 .../_components/color-palette-selector.tsx    | 17 ++++++---
 .../color-scale-override-selector.tsx         | 35 +++++++++++++-----
 .../src/pages/themes/_components/control.tsx  | 23 ++++++++++--
 .../_components/theme-preview/options.tsx     | 15 ++------
 .../preview-color-scale-select.tsx            | 37 +++++++++++++++++++
 website/src/pages/themes/_config/index.tsx    |  7 +++-
 website/src/pages/themes/_config/palette.tsx  | 12 +++---
 7 files changed, 111 insertions(+), 35 deletions(-)
 create mode 100644 website/src/pages/themes/_components/theme-preview/preview-color-scale-select.tsx

diff --git a/website/src/pages/themes/_components/color-palette-selector.tsx b/website/src/pages/themes/_components/color-palette-selector.tsx
index 0674ec4ee..ddef79a5b 100644
--- a/website/src/pages/themes/_components/color-palette-selector.tsx
+++ b/website/src/pages/themes/_components/color-palette-selector.tsx
@@ -28,6 +28,17 @@ const ColorPaletteSelector = ({
     updateColorScale(value);
   };
 
+  const handleColorChange = (newColor, i, cScale) => {
+    onColorChange({
+      newColor,
+      index: i,
+      colorScale: cScale,
+    });
+    if (colorScale !== cScale) {
+      updateColorScale(cScale);
+    }
+  };
+
   const isSelected = colorScale === value;
 
   return (
@@ -54,11 +65,7 @@ const ColorPaletteSelector = ({
                 key={i}
                 color={color}
                 onColorChange={(newColor) =>
-                  onColorChange({
-                    newColor,
-                    index: i,
-                    colorScale: colorScaleType as string,
-                  })
+                  handleColorChange(newColor, i, colorScaleType)
                 }
               />
             ))}
diff --git a/website/src/pages/themes/_components/color-scale-override-selector.tsx b/website/src/pages/themes/_components/color-scale-override-selector.tsx
index 6fe015321..d6562be0c 100644
--- a/website/src/pages/themes/_components/color-scale-override-selector.tsx
+++ b/website/src/pages/themes/_components/color-scale-override-selector.tsx
@@ -1,13 +1,18 @@
-import React from "react";
+import React, { useCallback } from "react";
 import ColorPicker from "./color-picker";
 import clsx from "clsx";
 import Toggle from "./toggle";
+import {
+  defaultColorScale,
+  usePreviewOptions,
+} from "../_providers/previewOptionsProvider";
 
 type ColorScaleOverrideSelectorProps = {
   id: string;
   label?: string;
   value?: string | string[];
   onChange: (value: string[] | undefined) => void;
+  hideDefaultToggle?: boolean;
   className?: string;
 };
 
@@ -16,38 +21,50 @@ const ColorScaleOverrideSelector = ({
   label = "Color Scale",
   value,
   onChange,
+  hideDefaultToggle = false,
   className,
 }: ColorScaleOverrideSelectorProps) => {
+  const { colorScale, updateColorScale } = usePreviewOptions();
   const hasCustomValue = Array.isArray(value);
   const [initialCustomValue] = React.useState(
     hasCustomValue ? value : undefined,
   );
 
+  const setColorScaleToDefault = useCallback(() => {
+    if (colorScale !== defaultColorScale) {
+      updateColorScale(defaultColorScale);
+    }
+  }, [colorScale, updateColorScale]);
+
   const onCheckboxChange = (isChecked) => {
     if (isChecked) {
       onChange(initialCustomValue);
     } else {
       onChange(undefined);
     }
+    setColorScaleToDefault();
   };
 
   const handleColorChange = (newColor, index) => {
     const newValue = [...(value as string[])];
     newValue[index] = newColor;
     onChange(newValue);
+    setColorScaleToDefault();
   };
 
   return (
     <fieldset className={clsx("p-0 m-0", className)}>
       <label className="block mb-3 text-sm font-bold">{label}</label>
-      <Toggle
-        id={id}
-        label="Use custom color scale"
-        checked={hasCustomValue}
-        onChange={onCheckboxChange}
-        className="mb-3"
-        size="sm"
-      />
+      {!hideDefaultToggle && (
+        <Toggle
+          id={id}
+          label="Use custom color scale"
+          checked={hasCustomValue}
+          onChange={onCheckboxChange}
+          className="mb-3"
+          size="sm"
+        />
+      )}
       {hasCustomValue && (
         <div className="flex flex-wrap gap-2 mt-3">
           {value.map((color, i) => (
diff --git a/website/src/pages/themes/_components/control.tsx b/website/src/pages/themes/_components/control.tsx
index 843793439..851208a45 100644
--- a/website/src/pages/themes/_components/control.tsx
+++ b/website/src/pages/themes/_components/control.tsx
@@ -7,6 +7,7 @@ import { getConfigValue } from "../_utils";
 import { useTheme } from "../_providers/themeProvider";
 import Accordion from "./accordion";
 import ColorScaleOverrideSelector from "./color-scale-override-selector";
+import PreviewColorScaleSelect from "./theme-preview/preview-color-scale-select";
 
 export type ColorChangeArgs = {
   newColor?: string;
@@ -78,9 +79,16 @@ const Control = ({ type, control, className }: ControlProps) => {
     case "section":
       return (
         <section className="mb-8">
-          <h3 className="text-lg font-bold text-secondary mb-4">
-            {control.label}
-          </h3>
+          <div className="mb-4">
+            <h3 className="text-lg font-semibold text-secondary mb-0">
+              {control.label}
+            </h3>
+            {control.description && (
+              <p className="text-sm text-grayscale-400">
+                {control.description}
+              </p>
+            )}
+          </div>
           {control.controls?.map((nestedControl, i) => (
             <Control
               key={nestedControl.label + i}
@@ -127,6 +135,15 @@ const Control = ({ type, control, className }: ControlProps) => {
           value={configValue as string}
           onChange={handleChange}
           className={className}
+          hideDefaultToggle={control.hideDefaultToggle}
+        />
+      );
+    case "colorScalePreview":
+      return (
+        <PreviewColorScaleSelect
+          key={control.label}
+          label={control.label}
+          className={className}
         />
       );
     case "colorPicker":
diff --git a/website/src/pages/themes/_components/theme-preview/options.tsx b/website/src/pages/themes/_components/theme-preview/options.tsx
index 22de5f76a..2f187f717 100644
--- a/website/src/pages/themes/_components/theme-preview/options.tsx
+++ b/website/src/pages/themes/_components/theme-preview/options.tsx
@@ -3,14 +3,14 @@ import Select from "../select";
 import { usePreviewOptions } from "../../_providers/previewOptionsProvider";
 import { colorScaleOptions } from "../../_const";
 import Toggle from "../toggle";
+import PreviewColorScaleSelect from "./preview-color-scale-select";
 
 type Props = {
   isOpen: boolean;
 };
 
 export const Options = forwardRef<HTMLDivElement, Props>(({ isOpen }, ref) => {
-  const { colorScale, updateColorScale, showTooltips, setShowTooltips } =
-    usePreviewOptions();
+  const { showTooltips, setShowTooltips } = usePreviewOptions();
 
   return (
     <div className="relative">
@@ -20,16 +20,7 @@ export const Options = forwardRef<HTMLDivElement, Props>(({ isOpen }, ref) => {
           ref={ref}
         >
           <h1 className="text-base font-bold mb-4">Preview Settings</h1>
-          <Select
-            id="color-scale-preview"
-            label="Preview color scale"
-            value={colorScale}
-            onChange={updateColorScale}
-            options={colorScaleOptions}
-            includeDefault
-            className="flex items-center justify-between my-2"
-            size="sm"
-          />
+          <PreviewColorScaleSelect size="sm" />
           <Toggle
             id="show-tooltips"
             label="Show tooltips instead of labels"
diff --git a/website/src/pages/themes/_components/theme-preview/preview-color-scale-select.tsx b/website/src/pages/themes/_components/theme-preview/preview-color-scale-select.tsx
new file mode 100644
index 000000000..c6fffd34a
--- /dev/null
+++ b/website/src/pages/themes/_components/theme-preview/preview-color-scale-select.tsx
@@ -0,0 +1,37 @@
+import React, { useId } from "react";
+import Select from "../select";
+import { usePreviewOptions } from "../../_providers/previewOptionsProvider";
+import { colorScaleOptions } from "../../_const";
+import clsx from "clsx";
+
+type PreviewColorScaleSelectProps = {
+  label?: string;
+  size?: "sm" | "md";
+  className?: string;
+};
+
+const PreviewColorScaleSelect = ({
+  label = "Preview color scale",
+  size = "md",
+  className,
+}: PreviewColorScaleSelectProps) => {
+  const { colorScale, updateColorScale } = usePreviewOptions();
+  const id = useId();
+  return (
+    <Select
+      id={id}
+      label={label}
+      value={colorScale}
+      onChange={updateColorScale}
+      options={colorScaleOptions}
+      includeDefault
+      className={clsx(
+        "my-2",
+        size === "sm" && "flex items-center justify-between",
+        className,
+      )}
+      size={size}
+    />
+  );
+};
+export default PreviewColorScaleSelect;
diff --git a/website/src/pages/themes/_config/index.tsx b/website/src/pages/themes/_config/index.tsx
index 6a86c05f5..6ffa8a868 100644
--- a/website/src/pages/themes/_config/index.tsx
+++ b/website/src/pages/themes/_config/index.tsx
@@ -6,7 +6,11 @@ export type ControlConfig = {
   controls?: ControlConfig[];
 } & (
   | {
-      type: "section" | "accordion";
+      type: "accordion" | "colorScalePreview";
+    }
+  | {
+      type: "section";
+      description?: string;
     }
   | {
       type: "colorPalette";
@@ -16,6 +20,7 @@ export type ControlConfig = {
   | {
       type: "colorScale";
       path: string | string[];
+      showDefaultToggle?: boolean;
     }
   | {
       type: "slider" | "select" | "colorPicker";
diff --git a/website/src/pages/themes/_config/palette.tsx b/website/src/pages/themes/_config/palette.tsx
index 4374a283c..ac4e8a385 100644
--- a/website/src/pages/themes/_config/palette.tsx
+++ b/website/src/pages/themes/_config/palette.tsx
@@ -4,12 +4,13 @@ import { getNestedColorScaleConfig } from "../_utils";
 
 const paletteOptionsConfig: OptionsPanelConfig = {
   title: "Color Palette",
-  description:
-    "Select a color palette to apply it to the preview charts, then adjust individual colors in the palette to customize the theme.",
+  description: "Customize your theme's color palettes.",
   controls: [
     {
       type: "section",
-      label: "Component Defaults",
+      label: "Defaults",
+      description:
+        "Set the default color scale for each of the following Victory components.",
       controls: [
         {
           type: "accordion",
@@ -30,11 +31,12 @@ const paletteOptionsConfig: OptionsPanelConfig = {
     },
     {
       type: "section",
-      label: "Color Palettes",
+      label: "Color Scales",
+      description: "Customize the theme's predefined color scale palettes.",
       controls: colorScaleOptions.map((option) => ({
         type: "colorPalette",
-        colorScaleType: option.value,
         label: option.label,
+        colorScaleType: option.value,
         value: option.value,
       })),
     },