@motionscript/charts 0.1.1-alpha.1 → 0.1.1-alpha.2

package/src/kit/style.ts

@@ -2,11 +2,14 @@
  * The chart family's style: one `style` entry per chart, built from the groups
  * below, so a look saved off one chart lays onto any other (a field the other
  * chart does not draw is dropped). A chart spreads the shared groups and adds a
- * `marks` group of its own.
+ * `marks` group of its own. Every run of text a chart draws is its own
+ * `Types.typography` field, so axis labels, titles, values and the legend are
+ * each set the way a text node is.
  */
 
 import {
   Types,
+  textOps,
   type Fill,
   type StrokeResolved,
   type Stroke as _Stroke,
@@ -19,29 +22,50 @@ import {
 
 import type { AxisConfig, ChartSeries, LegendConfig } from "./shared"
 
-/** The style family every chart shares; a host keys saved styles by it. */
+/** The style family every chart shares; the built-in presets are written for it. */
 export const CHART_STYLE_FAMILY = "chart"
 
-/** The out-of-the-box series colours, cycled by series (or row) index. */
+/** The out-of-the-box series fills, cycled by series (or row) index. */
 export const CHART_PALETTE_DEFAULT = ["#4f8cff", "#2fbf8f", "#f5a524", "#e5547a", "#9b6cf0"] as const
 
-export const CHART_COLORS = {
-  /** A colour per series (a pie's or radial's per row), cycled. */
-  palette: Types.palette(CHART_PALETTE_DEFAULT),
-  /** Values, legend captions, centre text. */
-  foreground: Types.fill("#f4f4f5"),
-  /** Axis markers and captions, spoke labels. */
-  muted: Types.fill("#a1a1aa"),
-  /** Behind the plot; none by default, so the chart reads against the stage. */
+/** The default ink of values, legend captions and centre text, on the dark stage. */
+export const CHART_FOREGROUND = "#f4f4f5"
+/** The default ink of axis markers, axis captions and spoke labels. */
+export const CHART_MUTED = "#a1a1aa"
+
+export const CHART_SERIES = {
+  /** A fill per series (a pie's or radial's per row), cycled; each may stack several paints. */
+  seriesFills: Types.palette(CHART_PALETTE_DEFAULT),
+}
+
+export const CHART_BACKGROUND = {
+  /** Behind the whole chart, legend and axes included; none by default, so the chart reads against the stage. */
   background: Types.fill([]),
 }
 
-export const CHART_TEXT = {
-  /** Empty: the scene's default face. */
-  fontFamily: Types.font(""),
-  /** Marker and legend size at 1080p; titles and values scale from it. */
-  fontSize: Types.number(28, { min: 8, max: 160, step: 1, unit: "px" }),
-  fontWeight: Types.number(500, { min: 100, max: 900, step: 100 }),
+export const GRID_BACKGROUND = {
+  ...CHART_BACKGROUND,
+  /** Behind the plot only, under the grid lines; none by default. */
+  gridBackground: Types.fill([]),
+}
+
+/** The legend's captions, which every chart with a legend draws. */
+export const LEGEND_TEXT = {
+  legendText: Types.typography({ fontSize: 28, fontWeight: 500, fill: CHART_FOREGROUND }),
+}
+
+export const CARTESIAN_TEXT = {
+  /** The markers under the plot: categories on a column chart, values on a horizontal bar chart. */
+  xLabelText: Types.typography({ fontSize: 28, fontWeight: 500, fill: CHART_MUTED }),
+  /** The caption under the plot. */
+  xTitleText: Types.typography({ fontSize: 31, fontWeight: 600, fill: CHART_MUTED }),
+  /** The markers beside the plot. */
+  yLabelText: Types.typography({ fontSize: 28, fontWeight: 500, fill: CHART_MUTED }),
+  /** The caption beside the plot, turned on its side. */
+  yTitleText: Types.typography({ fontSize: 31, fontWeight: 600, fill: CHART_MUTED }),
+  /** The figures printed by the marks. */
+  valueText: Types.typography({ fontSize: 24, fontWeight: 600, fill: CHART_FOREGROUND }),
+  ...LEGEND_TEXT,
 }
 
 export const CARTESIAN_GRID = {
@@ -66,25 +90,23 @@ export const CHART_LEGEND = {
   swatch: Types.oneOf(["square", "circle", "line"] as const),
 }
 
-/** The type fields, and the two text colours: what every text helper reads. */
-export interface ChartTextStyle {
-  readonly foreground: Fill
-  readonly muted: Fill
-  readonly fontFamily: string
-  readonly fontSize: number
-  readonly fontWeight: number
-}
-
 /** The fields every chart's style resolves, whichever groups it spreads. */
-export interface ChartStyleBase extends ChartTextStyle {
-  readonly palette: readonly Fill[]
+export interface ChartStyleBase {
+  readonly seriesFills: readonly Fill[]
   readonly background: Fill
+  readonly legendText: TextStyle
   readonly legend: LegendPosition
   readonly swatch: LegendSwatch
 }
 
-/** The cartesian grid fields, for the line and bar charts. */
+/** The cartesian fields, for the line and bar charts. */
 export interface CartesianStyle extends ChartStyleBase {
+  readonly gridBackground: Fill
+  readonly xLabelText: TextStyle
+  readonly xTitleText: TextStyle
+  readonly yLabelText: TextStyle
+  readonly yTitleText: TextStyle
+  readonly valueText: TextStyle
   readonly horizontalGrid: StrokeResolved[]
   readonly verticalGrid: StrokeResolved[]
   readonly axisStroke: StrokeResolved[]
@@ -92,8 +114,14 @@ export interface CartesianStyle extends ChartStyleBase {
   readonly showYAxis: boolean
 }
 
-/** The rule and track fields a preset restates so its rules read on its background (a chart keeps those it draws). */
-const _PRESET_RULES = {
+/** The fields a preset restates so its rules and text read on its background (a chart keeps those it draws). */
+const _PRESET_FIELDS = {
+  ...CHART_SERIES,
+  ...GRID_BACKGROUND,
+  ...CARTESIAN_TEXT,
+  labelText: Types.typography(),
+  centerText: Types.typography(),
+  spokeText: Types.typography(),
   horizontalGrid: CARTESIAN_GRID.horizontalGrid,
   gridStroke: Types.stroke([]),
   spokeStroke: Types.stroke([]),
@@ -101,147 +129,154 @@ const _PRESET_RULES = {
 }
 
 /** A preset's fields: any chart's, so one preset dresses every chart. */
-export type ChartStylePreset = StyleInput<typeof CHART_COLORS & typeof CHART_TEXT & typeof _PRESET_RULES>
+export type ChartStylePreset = StyleInput<typeof _PRESET_FIELDS>
+
+/** Every text field's ink: `foreground` for values, the legend and centre text, `muted` for markers and captions. */
+function inks(foreground: string, muted: string) {
+  const on = (fill: string) => ({ fill })
+  return {
+    xLabelText: on(muted),
+    xTitleText: on(muted),
+    yLabelText: on(muted),
+    yTitleText: on(muted),
+    valueText: on(foreground),
+    legendText: on(foreground),
+    labelText: on(muted),
+    centerText: on(foreground),
+    spokeText: on(muted),
+  } satisfies ChartStylePreset
+}
+
+/** Every rule a chart draws, and a radial's track, in one paint. */
+function rules(fill: string) {
+  return {
+    horizontalGrid: { weight: 2, fill },
+    gridStroke: { weight: 2, fill },
+    spokeStroke: { weight: 2, fill },
+    track: fill,
+  } satisfies ChartStylePreset
+}
 
 /** Ready-made looks, each stating every colour so applying one replaces the last. */
 export const CHART_STYLE_PRESETS = {
   midnight: {
-    palette: [...CHART_PALETTE_DEFAULT],
-    foreground: "#f4f4f5",
-    muted: "#a1a1aa",
-    horizontalGrid: { weight: 2, fill: "white/15" },
-    gridStroke: { weight: 2, fill: "white/15" },
-    spokeStroke: { weight: 2, fill: "white/15" },
+    seriesFills: [...CHART_PALETTE_DEFAULT],
+    ...inks(CHART_FOREGROUND, CHART_MUTED),
+    ...rules("white/15"),
     track: "white/10",
     background: [],
+    gridBackground: [],
   },
   paper: {
-    palette: ["#2563eb", "#059669", "#d97706", "#db2777", "#7c3aed"],
-    foreground: "#1c1917",
-    muted: "#57534e",
-    horizontalGrid: { weight: 2, fill: "#1c1917/12" },
-    gridStroke: { weight: 2, fill: "#1c1917/12" },
-    spokeStroke: { weight: 2, fill: "#1c1917/12" },
-    track: "#1c1917/12",
+    seriesFills: ["#2563eb", "#059669", "#d97706", "#db2777", "#7c3aed"],
+    ...inks("#1c1917", "#57534e"),
+    ...rules("#1c1917/12"),
     background: "#fafaf9",
+    gridBackground: [],
   },
   ember: {
-    palette: ["#d9603b", "#8194ad", "#e0a93b", "#5e9d6b", "#9ec85a"],
-    foreground: "#e9e1d4",
-    muted: "#8a7f70",
-    horizontalGrid: { weight: 2, fill: "#2c2820" },
-    gridStroke: { weight: 2, fill: "#2c2820" },
-    spokeStroke: { weight: 2, fill: "#2c2820" },
-    track: "#2c2820",
+    seriesFills: ["#d9603b", "#8194ad", "#e0a93b", "#5e9d6b", "#9ec85a"],
+    ...inks("#e9e1d4", "#8a7f70"),
+    ...rules("#2c2820"),
     background: "#15130e",
+    gridBackground: [],
   },
   neon: {
-    palette: ["#22d3ee", "#a3e635", "#f472b6", "#facc15", "#818cf8"],
-    foreground: "#ffffff",
-    muted: "#94a3b8",
-    horizontalGrid: { weight: 2, fill: "white/10" },
-    gridStroke: { weight: 2, fill: "white/10" },
-    spokeStroke: { weight: 2, fill: "white/10" },
-    track: "white/10",
+    seriesFills: ["#22d3ee", "#a3e635", "#f472b6", "#facc15", "#818cf8"],
+    ...inks("#ffffff", "#94a3b8"),
+    ...rules("white/10"),
     background: [],
+    gridBackground: [],
   },
   ocean: {
-    palette: ["#0ea5e9", "#14b8a6", "#6366f1", "#38bdf8", "#2dd4bf"],
-    foreground: "#e0f2fe",
-    muted: "#7dd3fc",
-    horizontalGrid: { weight: 2, fill: "#7dd3fc/20" },
-    gridStroke: { weight: 2, fill: "#7dd3fc/20" },
-    spokeStroke: { weight: 2, fill: "#7dd3fc/20" },
-    track: "#7dd3fc/20",
+    seriesFills: ["#0ea5e9", "#14b8a6", "#6366f1", "#38bdf8", "#2dd4bf"],
+    ...inks("#e0f2fe", "#7dd3fc"),
+    ...rules("#7dd3fc/20"),
     background: "#082f49",
+    gridBackground: [],
   },
   sunset: {
-    palette: ["#f97316", "#ef4444", "#ec4899", "#f59e0b", "#a855f7"],
-    foreground: "#fff7ed",
-    muted: "#fdba74",
-    horizontalGrid: { weight: 2, fill: "#fdba74/20" },
-    gridStroke: { weight: 2, fill: "#fdba74/20" },
-    spokeStroke: { weight: 2, fill: "#fdba74/20" },
-    track: "#fdba74/20",
+    seriesFills: ["#f97316", "#ef4444", "#ec4899", "#f59e0b", "#a855f7"],
+    ...inks("#fff7ed", "#fdba74"),
+    ...rules("#fdba74/20"),
     background: [],
+    gridBackground: [],
   },
   pastel: {
-    palette: ["#a5b4fc", "#f9a8d4", "#86efac", "#fde68a", "#7dd3fc"],
-    foreground: "#f8fafc",
-    muted: "#cbd5e1",
-    horizontalGrid: { weight: 2, fill: "white/12" },
-    gridStroke: { weight: 2, fill: "white/12" },
-    spokeStroke: { weight: 2, fill: "white/12" },
-    track: "white/12",
+    seriesFills: ["#a5b4fc", "#f9a8d4", "#86efac", "#fde68a", "#7dd3fc"],
+    ...inks("#f8fafc", "#cbd5e1"),
+    ...rules("white/12"),
     background: [],
+    gridBackground: [],
   },
   mono: {
-    palette: ["#fafafa", "#a3a3a3", "#737373", "#d4d4d4", "#525252"],
-    foreground: "#fafafa",
-    muted: "#a3a3a3",
-    horizontalGrid: { weight: 2, fill: "white/12" },
-    gridStroke: { weight: 2, fill: "white/12" },
-    spokeStroke: { weight: 2, fill: "white/12" },
-    track: "white/12",
+    seriesFills: ["#fafafa", "#a3a3a3", "#737373", "#d4d4d4", "#525252"],
+    ...inks("#fafafa", "#a3a3a3"),
+    ...rules("white/12"),
     background: [],
+    gridBackground: [],
   },
 } satisfies Record<string, ChartStylePreset>
 
-/** Series `index`'s colour: its own `fill`, else the palette's, cycled. */
-export function paletteFill(style: Pick<ChartStyleBase, "palette">, index: number, own?: Fill): Fill {
+/** Series `index`'s fill: its own `fill`, else the style's series fills, cycled. */
+export function paletteFill(style: Pick<ChartStyleBase, "seriesFills">, index: number, own?: Fill): Fill {
   if (own != null) return own
-  const palette = style.palette
-  return palette.length > 0 ? palette[index % palette.length] : "white"
+  const fills = style.seriesFills
+  return fills.length > 0 ? fills[index % fills.length] : "white"
 }
 
 /** {@link paletteFill} for a series. */
-export function seriesFill(style: Pick<ChartStyleBase, "palette">, series: ChartSeries, index: number): Fill {
+export function seriesFill(style: Pick<ChartStyleBase, "seriesFills">, series: ChartSeries, index: number): Fill {
   return paletteFill(style, index, series.fill)
 }
 
-function face(style: Pick<ChartTextStyle, "fontFamily">): Pick<TextStyle, "fontFamily"> {
-  return style.fontFamily ? { fontFamily: style.fontFamily } : {}
+/** A text style's size in px; an autofit or unset size reads as `fallback`. */
+export function sizeOf(text: TextStyle | undefined, fallback = 28): number {
+  const size = text?.fontSize
+  return typeof size === "number" && Number.isFinite(size) ? size : fallback
 }
 
-/** Axis markers, spoke labels: muted, at the base size. */
-export function markerText(style: ChartTextStyle, textAlign: TextStyle["textAlign"] = "center"): TextStyle {
-  return { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign, fill: style.muted }
+/**
+ * `text` as a text node takes it, aligned where the chart puts it, with `over`
+ * laid on top. Unset keys are dropped: an `undefined` spread onto a node is a
+ * value, and an unset face must stay unset so the host's default applies.
+ */
+export function placedText(text: TextStyle, textAlign: TextStyle["textAlign"] = "center", over?: TextStyle): TextStyle {
+  return textOps.styleProps({ ...textOps.mergeStyle(text, over), textAlign }) as TextStyle
 }
 
-/** Axis captions: muted, a step larger and heavier than the markers. */
-export function titleText(style: ChartTextStyle): TextStyle {
-  return {
-    ...face(style),
-    fontSize: Math.round(style.fontSize * 1.1),
-    fontWeight: Math.min(900, style.fontWeight + 100),
-    textAlign: "center",
-    fill: style.muted,
-  }
+/** Axis markers on `axis`, aligned as that axis sets them. */
+export function markerText(style: Pick<CartesianStyle, "xLabelText" | "yLabelText">, axis: "x" | "y"): TextStyle {
+  return placedText(axis === "x" ? style.xLabelText : style.yLabelText, axis === "x" ? "center" : "right")
 }
 
-/** Values on marks and legend captions: the foreground, at the base size. */
-export function valueText(style: ChartTextStyle, textAlign: TextStyle["textAlign"] = "center"): TextStyle {
-  return { ...face(style), fontSize: style.fontSize, fontWeight: Math.min(900, style.fontWeight + 100), textAlign, fill: style.foreground }
+/** The figures printed by the marks. */
+export function valueText(style: Pick<CartesianStyle, "valueText">, textAlign: TextStyle["textAlign"] = "center"): TextStyle {
+  return placedText(style.valueText, textAlign)
 }
 
 /**
  * The kit axis parts' config from a style. `x` is the axis under the plot;
  * its grid lines are vertical (one per x marker), the `y` axis's horizontal.
  */
-export function axisConfigOf(style: Pick<CartesianStyle, "verticalGrid" | "horizontalGrid"> & ChartTextStyle, axis: "x" | "y"): AxisConfig {
-  const gap = Math.round(style.fontSize * 0.6)
+export function axisConfigOf(
+  style: Pick<CartesianStyle, "verticalGrid" | "horizontalGrid" | "xLabelText" | "xTitleText" | "yLabelText" | "yTitleText">,
+  axis: "x" | "y"
+): AxisConfig {
+  const gap = Math.round(sizeOf(axis === "x" ? style.xLabelText : style.yLabelText) * 0.6)
   return {
-    labelStyle: markerText(style, axis === "x" ? "center" : "right"),
-    titleStyle: titleText(style),
+    labelStyle: markerText(style, axis),
+    titleStyle: placedText(axis === "x" ? style.xTitleText : style.yTitleText),
     lineStyle: axis === "x" ? style.verticalGrid : style.horizontalGrid,
     tickPadding: axis === "x" ? { top: gap } : { right: gap },
     titlePadding: axis === "x" ? { top: Math.round(gap / 2) } : { right: gap },
   }
 }
 
-/** The kit legend's config: captions in the foreground, the swatch shaped by `swatch`. */
-export function legendConfigOf(style: ChartTextStyle & Pick<ChartStyleBase, "swatch">): LegendConfig {
-  const size = Math.max(8, Math.round(style.fontSize * 0.6))
+/** The kit legend's config: captions in `legendText`, the swatch shaped by `swatch` and sized off the captions. */
+export function legendConfigOf(style: Pick<ChartStyleBase, "swatch" | "legendText">): LegendConfig {
+  const type = sizeOf(style.legendText)
+  const size = Math.max(8, Math.round(type * 0.6))
   const marker =
     style.swatch === "line"
       ? { width: Math.round(size * 2), height: Math.max(3, Math.round(size / 4)), borderRadius: size }
@@ -250,8 +285,69 @@ export function legendConfigOf(style: ChartTextStyle & Pick<ChartStyleBase, "swa
         : { width: size, height: size, borderRadius: Math.round(size / 4) }
   return {
     padding: 0,
-    textStyle: { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign: "left", fill: style.foreground },
-    itemGap: Math.round(style.fontSize * 1.4),
+    textStyle: placedText(style.legendText, "left"),
+    itemGap: Math.round(type * 1.4),
     markerStyle: { ...marker, stroke: [], shadow: [] },
   }
 }
+
+/** Which text a chart drew from the retired shared text fields. */
+export type ChartTextLayout = "cartesian" | "pie" | "radar" | "radial"
+
+/**
+ * The `style` entry's hook for documents written before every run of text got
+ * its own field (0.1.1-alpha.1): `barRadius` became `barCornerRadius`, `palette` became `seriesFills`; `foreground`,
+ * `muted` and the one `fontFamily`/`fontSize`/`fontWeight` became the text
+ * fields as each chart derived them; a cartesian or radar `background`, which
+ * painted the plot, became `gridBackground`. A current style comes back as is.
+ */
+export function migrateChartStyle(layout: ChartTextLayout): (value: unknown) => unknown {
+  return (value) => {
+    if (typeof value !== "object" || value === null || Array.isArray(value)) return value
+    const old = value as Record<string, unknown>
+    const retired = ["palette", "foreground", "muted", "fontFamily", "fontSize", "fontWeight", "barRadius"]
+    const plotBackground = layout === "cartesian" || layout === "radar"
+    if (!retired.some((key) => key in old) && !(plotBackground && "background" in old && !("gridBackground" in old))) return value
+
+    const { palette, foreground, muted, fontFamily, fontSize, fontWeight, barRadius, ...rest } = old
+    const out: Record<string, unknown> = { ...rest }
+    // A bar radius rounded only the far end; its replacement states every corner.
+    if (typeof barRadius === "number" && out.barCornerRadius === undefined) {
+      out.barCornerRadius = { topLeft: barRadius, topRight: barRadius, bottomRight: 0, bottomLeft: 0 }
+    }
+    if (palette !== undefined && out.seriesFills === undefined) out.seriesFills = palette
+    if (plotBackground && "background" in old && !("gridBackground" in old)) {
+      out.gridBackground = old.background
+      delete out.background
+    }
+    const size = typeof fontSize === "number" ? fontSize : undefined
+    const weight = typeof fontWeight === "number" ? fontWeight : undefined
+    const text = (ink: unknown, scale = 1, heavier = 0): Record<string, unknown> | undefined => {
+      const t: Record<string, unknown> = {}
+      if (typeof fontFamily === "string" && fontFamily !== "") t.fontFamily = fontFamily
+      if (size !== undefined) t.fontSize = Math.round(size * scale)
+      if (weight !== undefined) t.fontWeight = Math.min(900, weight + heavier)
+      if (ink !== undefined) t.fill = ink
+      return Object.keys(t).length > 0 ? t : undefined
+    }
+    const fields: Record<string, Record<string, unknown> | undefined> = { legendText: text(foreground) }
+    if (layout === "cartesian") {
+      fields.xLabelText = text(muted)
+      fields.yLabelText = text(muted)
+      fields.xTitleText = text(muted, 1.1, 100)
+      fields.yTitleText = text(muted, 1.1, 100)
+      fields.valueText = text(foreground, 0.85, 100)
+    } else if (layout === "pie") {
+      fields.labelText = text(muted)
+      fields.valueText = text(foreground, 1, 200)
+      fields.centerText = text(foreground, 1.8, 300)
+    } else if (layout === "radar") {
+      fields.spokeText = text(muted)
+    } else {
+      fields.labelText = text(muted)
+      fields.centerText = text(foreground, 1.8, 300)
+    }
+    for (const [key, field] of Object.entries(fields)) if (field && out[key] === undefined) out[key] = field
+    return out
+  }
+}

package/src/line-chart/line-chart.ts

@@ -12,6 +12,7 @@ import {
   // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
   type Node2D,
   type Node2DProps as _Node2DProps,
+  type TextStyle as _TextStyle,
   type Fill as _Fill,
   type FillResolved as _FillResolved,
   type Stroke as _Stroke,
@@ -46,14 +47,17 @@ import {
 } from "../kit/shared"
 import {
   CARTESIAN_GRID,
-  CHART_COLORS,
+  CARTESIAN_TEXT,
   CHART_LEGEND,
+  CHART_SERIES,
   CHART_STYLE_FAMILY,
   CHART_STYLE_PRESETS,
-  CHART_TEXT,
+  GRID_BACKGROUND,
   axisConfigOf,
   legendConfigOf,
+  migrateChartStyle,
   seriesFill,
+  sizeOf,
   valueText,
 } from "../kit/style"
 import { VerticalAxis, axisPads } from "../kit/vertical-axis"
@@ -75,7 +79,7 @@ import { resolveXScale, type XScale } from "./x-scale"
 
 const LINE_STYLE = Types.style(
   CHART_STYLE_FAMILY,
-  { colors: CHART_COLORS, text: CHART_TEXT, grid: CARTESIAN_GRID, marks: LINE_MARKS, labels: LINE_LABELS, legend: CHART_LEGEND },
+  { series: CHART_SERIES, background: GRID_BACKGROUND, text: CARTESIAN_TEXT, grid: CARTESIAN_GRID, marks: LINE_MARKS, labels: LINE_LABELS, legend: CHART_LEGEND },
   { presets: CHART_STYLE_PRESETS }
 )
 
@@ -352,6 +356,7 @@ export const LineChart = component2d({
     height: "fill",
     weights: (state) => state.series.map((s) => ((s.enabled ?? true) ? 1 : 0)),
   },
+  migrate: { style: migrateChartStyle("cartesian") },
   allowedChildren: [],
   children: (state) => {
     const style = () => state.style
@@ -450,7 +455,7 @@ export const LineChart = component2d({
         state.data.forEach((_row, k) => {
           const line = lines[i]
           const label: Node2D = new Text({
-            ...boundText(() => ({ ...valueText(style()), fontSize: Math.round(style().fontSize * 0.8) })),
+            ...boundText(() => valueText(style())),
             text: () => {
               const value = pixels(i).values[k]
               return value === undefined ? "" : yLabel(state, value, domains().y.ticks)
@@ -462,7 +467,7 @@ export const LineChart = component2d({
             },
             y: () => {
               const point = pixels(i).points[k]
-              const clear = label.layoutBounds.height / 2 + (style().dots ? style().dotSize / 2 : style().strokeWidth / 2) + Math.round(style().fontSize * 0.25)
+              const clear = label.layoutBounds.height / 2 + (style().dots ? style().dotSize / 2 : style().strokeWidth / 2) + Math.round(sizeOf(style().valueText) * 0.25)
               return (point?.y ?? 0) + (below ? -clear : clear)
             },
             // In once the trace has passed its point.
@@ -492,7 +497,7 @@ export const LineChart = component2d({
       clip: () => state.clipped || overflows(state, domains()),
       children: [
         new ChartCanvas({
-          fill: () => style().background,
+          fill: () => style().gridBackground,
           xGridStroke: () => style().verticalGrid,
           yGridStroke: () => style().horizontalGrid,
           xMarkers: () => domains().x.ticks,
@@ -506,8 +511,8 @@ export const LineChart = component2d({
         // Under the marks, so the highlight does not tint the stretch it picks out.
         new ChartRegion({
           box: spotlight,
-          stroke: () => ({ weight: 2, fill: fade(style().foreground, 0.7), dash: [14, 12], cap: "butt", align: "center" }),
-          fill: () => fade(style().foreground, 0.06),
+          stroke: () => ({ weight: 2, fill: fade(style().valueText.fill ?? "white", 0.7), dash: [14, 12], cap: "butt", align: "center" }),
+          fill: () => fade(style().valueText.fill ?? "white", 0.06),
           reveal: () => state.regionReveal,
         }),
         ...areas,
@@ -518,6 +523,7 @@ export const LineChart = component2d({
 
     return asParts([
       cartesianFrame({
+        background: () => style().background,
         left: vAxis,
         ghost,
         plot,

package/src/pie-chart/pie-chart.ts

@@ -10,6 +10,7 @@ import {
   // Named so this component's emitted type reaches `Node2D` and its props through the sdk, not core.
   type Node2D,
   type Node2DProps as _Node2DProps,
+  type TextStyle as _TextStyle,
   type Fill as _Fill,
   type FillResolved as _FillResolved,
 } from "@motionscript/sdk"
@@ -18,7 +19,7 @@ import { asParts, fresh } from "../kit/entries"
 import { beats, type AnyTimeline, type Beat } from "../kit/motion"
 import { PieLegend } from "../kit/pie-legend"
 import { PieRing } from "./pie-ring"
-import { CHART_STYLE_FAMILY, CHART_STYLE_PRESETS, paletteFill } from "../kit/style"
+import { CHART_STYLE_FAMILY, CHART_STYLE_PRESETS, migrateChartStyle, paletteFill } from "../kit/style"
 import {
   PIE_SPOTLIGHT_DIM,
   PIE_STYLE_GROUPS,
@@ -127,6 +128,7 @@ export const PieChart = component2d({
     height: "fill",
     pops: (state) => slicesOf(state).map(() => 0),
   },
+  migrate: { style: migrateChartStyle("pie") },
   allowedChildren: [],
   // The structure (a label and legend row per row) is read once; slices, paint and selection are bound, so a theme tween re-paints and a `set` of `data` re-cuts.
   children: (state) => {

package/src/pie-chart/shared.ts

@@ -1,10 +1,15 @@
 import { Types, type Fill, type TextStyle, type Stroke, type FillResolved as _FillResolved } from "@motionscript/sdk"
 
 import {
-  CHART_COLORS,
+  CHART_BACKGROUND,
+  CHART_FOREGROUND,
   CHART_LEGEND,
-  CHART_TEXT,
+  CHART_MUTED,
+  CHART_SERIES,
+  LEGEND_TEXT,
   legendConfigOf,
+  placedText,
+  sizeOf,
   type ChartStyleBase,
 } from "../kit/style"
 import { num, text, type LegendConfig } from "../kit/shared"
@@ -13,7 +18,7 @@ import { DEG, PIE_SPOTLIGHT_DIM, ringPoint, selectionFade, type CenterConfig, ty
 export { DEG, PIE_SPOTLIGHT_DIM, ringPoint, selectionFade, type CenterConfig, type PieSlice }
 
 /**
- * One slice per row, painted from `palette` by row order (cycling). Paint comes
+ * One slice per row, painted from `seriesFills` by row order (cycling). Paint comes
  * from the palette, not the rows, because a pie's mark is a row where a line's
  * colour belongs to a column; that lets a pie be fed a CSV of plain numbers.
  */
@@ -147,6 +152,9 @@ export interface LabelConfig {
 
 /** What a pie's `style` resolves to. */
 export interface PieStyle extends ChartStyleBase {
+  readonly labelText: TextStyle
+  readonly valueText: TextStyle
+  readonly centerText: TextStyle
   readonly innerRadius: number
   readonly sliceGap: number
   readonly sliceRadius: number
@@ -155,8 +163,17 @@ export interface PieStyle extends ChartStyleBase {
 
 /** The groups of a pie's `style`: no grid, as nothing is ruled. */
 export const PIE_STYLE_GROUPS = {
-  colors: CHART_COLORS,
-  text: CHART_TEXT,
+  series: CHART_SERIES,
+  background: CHART_BACKGROUND,
+  text: {
+    /** Each slice's name. */
+    labelText: Types.typography({ fontSize: 28, fontWeight: 500, fill: CHART_MUTED }),
+    /** Each slice's share or value, beside its name; inside a wedge both are set larger, inked for contrast. */
+    valueText: Types.typography({ fontSize: 28, fontWeight: 700, fill: CHART_FOREGROUND }),
+    /** The summary in the hole; its caption is set smaller, in the slice names' ink. */
+    centerText: Types.typography({ fontSize: 50, fontWeight: 800, fill: CHART_FOREGROUND }),
+    ...LEGEND_TEXT,
+  },
   marks: {
     /** Hole radius as a fraction of the outer radius: 0 is a pie, about 0.6 a donut. */
     innerRadius: Types.number(0, { min: 0, max: 0.9, step: 0.05 }),
@@ -176,34 +193,25 @@ export function legendOf(style: PieStyle): LegendConfig {
   return legendConfigOf(style)
 }
 
-function face(style: PieStyle): Pick<TextStyle, "fontFamily"> {
-  return style.fontFamily ? { fontFamily: style.fontFamily } : {}
-}
-
 export function ringConfigOf(style: PieStyle): RingConfig {
   return { gap: style.sliceGap, holeRadius: style.innerRadius, startAngle: 0, selectedGrow: 1.08, cornerRadius: style.sliceRadius }
 }
 
 export function labelConfigOf(style: PieStyle): LabelConfig {
-  const base: TextStyle = { ...face(style), fontSize: style.fontSize, fontWeight: style.fontWeight, textAlign: "center", fill: style.muted }
-  const bold = Math.min(900, style.fontWeight + 200)
+  const base = placedText(style.labelText)
+  const value = placedText(style.valueText)
   return {
     textStyle: base,
-    percentStyle: { ...base, fontWeight: bold, fill: style.foreground },
-    insideStyle: { ...base, fontSize: Math.round(style.fontSize * 1.9), fontWeight: bold, fill: "#111113" },
-    leaderStroke: { weight: 2, fill: style.muted },
+    percentStyle: value,
+    insideStyle: { ...value, fontSize: Math.round(sizeOf(style.valueText) * 1.9), fill: "#111113" },
+    leaderStroke: { weight: 2, fill: style.labelText.fill ?? "white" },
   }
 }
 
 export function centerConfigOf(style: PieStyle): CenterConfig {
+  const size = sizeOf(style.centerText, 50)
   return {
-    labelStyle: {
-      ...face(style),
-      fontSize: Math.round(style.fontSize * 1.8),
-      fontWeight: Math.min(900, style.fontWeight + 300),
-      textAlign: "center",
-      fill: style.foreground,
-    },
-    captionStyle: { ...face(style), fontSize: Math.round(style.fontSize * 0.8), fontWeight: style.fontWeight, textAlign: "center", fill: style.muted },
+    labelStyle: placedText(style.centerText),
+    captionStyle: placedText(style.labelText, "center", { fontSize: Math.round(size * 0.45) }),
   }
 }