Theme Builder: structured color/type controls, scheme catalog, diverging preview

src/core/theme-preview-specs.ts

@@ -4,13 +4,16 @@
  * A fixed set of small, self-contained Vega-Lite specs the Theme Builder
  * renders side by side with the draft config, so an edit is previewed across
  * every chart surface a config styles: titles and subtitles, axes and grids,
- * categorical and gradient legends, facet headers, and the major mark types.
- * Inline data only, compact fixed sizes — these are swatches, not analyses.
+ * facet headers, the major mark types, and — so every color control has a
+ * mirror — each color family: categorical (`range.category`), sequential
+ * (`range.heatmap` for rect, `range.ramp` for a continuous legend), and
+ * diverging (`range.diverging`, selected by a quantitative color scale with a
+ * `domainMid`). Inline data only, compact fixed sizes — swatches, not analyses.
  */
 
 import type { JsonObject } from './spec-config';
 
-const SCHEMA = 'https://vega.github.io/schema/vega-lite/v5.json';
+const SCHEMA = 'https://vega.github.io/schema/vega-lite/v6.json';
 
 export interface ThemePreviewSpec {
   /** Stable key for React lists and test assertions. */
@@ -160,6 +163,39 @@ const heatmap: ThemePreviewSpec = {
   },
 };
 
+const diverging: ThemePreviewSpec = {
+  id: 'diverging',
+  caption: 'Diverging — scale around a midpoint',
+  spec: {
+    $schema: SCHEMA,
+    title: 'Net change by topic',
+    width: 200,
+    height: 140,
+    data: {
+      values: [
+        { topic: 'Cost', delta: -8 },
+        { topic: 'Speed', delta: -3 },
+        { topic: 'Help', delta: 1 },
+        { topic: 'Look', delta: 6 },
+        { topic: 'Value', delta: 11 },
+      ],
+    },
+    mark: 'bar',
+    encoding: {
+      x: { field: 'topic', type: 'nominal', axis: { labelAngle: 0 } },
+      y: { field: 'delta', type: 'quantitative' },
+      // `domainMid` makes this a diverging color scale, so it reads from
+      // `range.diverging` rather than `range.ramp`/`heatmap` (the others above).
+      color: {
+        field: 'delta',
+        type: 'quantitative',
+        scale: { domainMid: 0 },
+        legend: { title: null },
+      },
+    },
+  },
+};
+
 const donut: ThemePreviewSpec = {
   id: 'donut',
   caption: 'Donut — palette, symbol legend',
@@ -212,13 +248,15 @@ const facet: ThemePreviewSpec = {
   },
 };
 
-/** The gallery, in display order. */
+/** The gallery, in display order — the three continuous-color examples
+ *  (scatter → ramp, heatmap → heatmap, diverging → diverging) sit together. */
 export const THEME_PREVIEW_SPECS: ReadonlyArray<ThemePreviewSpec> = [
   bar,
   line,
   area,
   scatter,
   heatmap,
+  diverging,
   donut,
   facet,
 ];