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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @motionscript/charts
 
+## 0.1.1-alpha.2
+
+### Patch Changes
+
+- 3050906: **Breaking:** every run of text a chart draws gets its own text style, the palette becomes `seriesFills`, and a chart has a background for the whole chart beside one for its grid.
+
+  - **`Types.typography(textStyle)`** (core, sdk): one text style as an entry (face, size, weight, style, spacing, paint). A partial is laid over the default or the value it replaces, so `{ fill }` recolours and keeps the rest; it tweens key by key. `describe()` reports `kind: "typography"` with its default.
+  - **Chart text** (charts): `foreground`, `muted`, `fontFamily`, `fontSize` and `fontWeight` are gone. Line and bar charts have `xLabelText`, `xTitleText`, `yLabelText`, `yTitleText`, `valueText` and `legendText`; a pie `labelText`, `valueText`, `centerText` and `legendText`; a radar `spokeText`; a radial `labelText` and `centerText`. Spacing that followed the one size now follows the text it sits beside.
+  - **Series fills**: `palette` is `seriesFills` (group `series`), each entry a fill that may stack paints.
+  - **Backgrounds**: `background` (group `background`) paints behind the whole chart on every chart; line, bar and radar charts add `gridBackground` for the plot (inside the web on a radar). A line or bar chart's old `background`, which painted the plot, is now `gridBackground`.
+  - **Bar corners**: `barRadius` is `barCornerRadius`, a `Types.cornerRadius` read as for a bar standing up (top pair at the far end, bottom pair at the base), with `barCornerStyle` (rounded or angled) beside it. `barWidth` reports itself as a percentage.
+  - Each chart's `migrate` hook (`migrateChartStyle`) carries a stored style across: the palette, the two inks and the shared type become the new fields as each chart derived them, a plot background becomes `gridBackground`, and a `barRadius` keeps rounding only the far end.
+
+  Migration: a stored document needs nothing done to it. Each chart's `migrate` hook converts its stored `style` (and a `to` command's) as the document opens: `palette` to `seriesFills`, `foreground`, `muted` and the font fields to the text fields as the chart derived them (titles 1.1× and a weight heavier, values as before), a line, bar or radar chart's `background` to `gridBackground`, and a number `barRadius` to `barCornerRadius` with only the top pair rounded. Code that sets these fields by hand, or a host that reads a chart's stored `style`, uses the new names; `migrateChartStyle(layout)` converts a style object the same way.
+
 ## 0.1.1-alpha.1
 
 ### Patch Changes

package/README.md

@@ -39,8 +39,10 @@ shelved and the box it is seeded at are the host's to keep. `lineChartDomains` a
 is out.
 
 The style kit exports `CHART_STYLE_FAMILY` (`"chart"`), `CHART_STYLE_PRESETS`,
-`CHART_PALETTE_DEFAULT` and the shared field groups (`CHART_COLORS`,
-`CHART_TEXT`, `CARTESIAN_GRID`, `CHART_LEGEND`).
+`CHART_PALETTE_DEFAULT`, the shared field groups (`CHART_SERIES`,
+`CHART_BACKGROUND`, `GRID_BACKGROUND`, `CARTESIAN_TEXT`, `LEGEND_TEXT`,
+`CARTESIAN_GRID`, `CHART_LEGEND`) and `migrateChartStyle`, each chart's
+`migrate` hook for styles written before 0.1.1-alpha.2.
 
 ## Nodes
 
@@ -65,17 +67,26 @@ is above 0.
 
 Each chart has one look entry, `style`, and nothing else about colour or type:
 no `theme`, no `showLegend`. Its fields come in groups, written grouped and read
-flat (`state.style.fontSize`):
+flat (`state.style.xLabelText`):
 
 | Group | Fields | On |
 |---|---|---|
-| colors | `palette`, `foreground`, `muted`, `background` | every chart |
-| text | `fontFamily`, `fontSize`, `fontWeight` | every chart |
+| series | `seriesFills`: a fill per series (per row on a pie or radial), cycled; each may stack paints | every chart |
+| background | `background` (the whole chart), `gridBackground` (the plot, under the grid) | every chart; `gridBackground` on line, bar, radar |
+| text | `xLabelText`, `xTitleText`, `yLabelText`, `yTitleText`, `valueText`, `legendText` | line, bar |
+| text | `labelText`, `valueText`, `centerText`, `legendText` | pie |
+| text | `spokeText`, `legendText` (radar); `labelText`, `centerText`, `legendText` (radial) | radar, radial |
 | grid | `horizontalGrid` (a 2px `white/15` stroke), `verticalGrid` (none), `axisStroke` (none), `showXAxis`, `showYAxis` | line, bar |
 | grid | `gridShape`, `gridLevels`, `gridStroke` (rings), `spokeStroke` (spokes), `spokeLabels` | radar |
-| marks | the chart's own: `strokeWidth`, `curve`, `dots`, `area`, `barRadius`, `innerRadius`, `sweep`, ... | every chart |
+| marks | the chart's own: `strokeWidth`, `curve`, `dots`, `area`, `barCornerRadius`, `barCornerStyle`, `innerRadius`, `sweep`, ... | every chart |
 | labels | `values` (line, bar), `labelPlacement` (pie), `ringLabels` (radial) | |
 
+Every run of text is a `Types.typography` field (face, size, weight, style,
+spacing, paint), so each is set like a text node; a partial (`{ fill }`) keeps the
+rest of the field's default. The chart places and aligns the text itself.
+`barCornerRadius` and `barCornerStyle` read as for a bar standing up: the top
+pair round its far end, the bottom pair its base, turned with the bar.
+
 A line is a stroke and an area is a fill: `horizontalGrid`, `verticalGrid`, `axisStroke`, `gridStroke`
 and `spokeStroke` are `Types.stroke` entries (weight, colour, dash and caps; empty draws
 nothing), and a radial's `track` is a `Types.fill` (empty draws no track). A series' `label`
@@ -87,14 +98,14 @@ previous style, and a key the chart does not have is dropped, so one style dress
 every chart in the family.
 
 `CHART_STYLE_PRESETS` (`midnight`, `paper`, `ember`, `neon`, `ocean`, `sunset`,
-`pastel`, `mono`) are colour-only partials. Spread one into a style and add to it:
+`pastel`, `mono`) are colour-only partials (each text field's `fill`, the rules, the backgrounds). Spread one into a style and add to it:
 
 ```ts
 import { CHART_STYLE_PRESETS } from '@motionscript/charts';
 
 const props = {
   // ...data, series
-  style: { ...CHART_STYLE_PRESETS.paper, fontSize: 32, area: 'gradient' },
+  style: { ...CHART_STYLE_PRESETS.paper, legendText: { fontSize: 32 }, area: 'gradient' },
 };
 ```
 

package/dist/bar-chart/bar-chart.d.ts

@@ -1,7 +1,10 @@
-import { type DataRecord, type NodeOf, type OutOf, type Node2D, type Node2DProps as _Node2DProps, type Fill as _Fill, type FillResolved as _FillResolved, type Stroke as _Stroke, type StrokeResolved as _StrokeResolved, type StyleInput as _StyleInput, type StyleValues as _StyleValues } from "@motionscript/sdk";
+import { type DataRecord, type NodeOf, type OutOf, type Node2D, type Node2DProps as _Node2DProps, type TextStyle as _TextStyle, type CornerRadiusResolved as _CornerRadiusResolved, type CornerStyleResolved as _CornerStyleResolved, type RectCornerRadius as _RectCornerRadius, type RectCornerStyle as _RectCornerStyle, type Fill as _Fill, type FillResolved as _FillResolved, type Stroke as _Stroke, type StrokeResolved as _StrokeResolved, type StyleInput as _StyleInput, type StyleValues as _StyleValues } from "@motionscript/sdk";
 import { type AxisDomainConfig, type ResolvedAxisDomain } from "../kit/shared.js";
 import { type BarSeries, type BarStack } from "./shared.js";
 declare const BAR_STYLE: import("@motionscript/sdk").Type<_StyleInput<{
+    gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+} & {
     legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
     swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
 } & {
@@ -11,21 +14,25 @@ declare const BAR_STYLE: import("@motionscript/sdk").Type<_StyleInput<{
     showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
     showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
 } & {
-    fontFamily: import("@motionscript/sdk").Type<string, string, false>;
-    fontSize: import("@motionscript/sdk").Type<number, number, false>;
-    fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+    xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+    xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+    yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+    yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+    valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
 } & {
-    palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
-    foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-    muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-    background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
 } & {
-    barRadius: import("@motionscript/sdk").Type<number, number, false>;
+    barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
+    barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
     barWidth: import("@motionscript/sdk").Type<number, number, false>;
     barGap: import("@motionscript/sdk").Type<number, number, false>;
 } & {
     values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
 }>, _StyleValues<{
+    gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+} & {
     legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
     swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
 } & {
@@ -35,16 +42,17 @@ declare const BAR_STYLE: import("@motionscript/sdk").Type<_StyleInput<{
     showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
     showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
 } & {
-    fontFamily: import("@motionscript/sdk").Type<string, string, false>;
-    fontSize: import("@motionscript/sdk").Type<number, number, false>;
-    fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+    legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+    xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+    xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+    yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+    yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+    valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
 } & {
-    palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
-    foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-    muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-    background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
 } & {
-    barRadius: import("@motionscript/sdk").Type<number, number, false>;
+    barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
+    barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
     barWidth: import("@motionscript/sdk").Type<number, number, false>;
     barGap: import("@motionscript/sdk").Type<number, number, false>;
 } & {
@@ -85,6 +93,9 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
     readonly valueAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
     readonly categoryAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
     readonly style: import("@motionscript/sdk").Type<_StyleInput<{
+        gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
         legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
         swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
     } & {
@@ -94,21 +105,25 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
         showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
         showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
     } & {
-        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
-        fontSize: import("@motionscript/sdk").Type<number, number, false>;
-        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+        legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
     } & {
-        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
-        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
     } & {
-        barRadius: import("@motionscript/sdk").Type<number, number, false>;
+        barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
+        barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
         barWidth: import("@motionscript/sdk").Type<number, number, false>;
         barGap: import("@motionscript/sdk").Type<number, number, false>;
     } & {
         values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
     }>, _StyleValues<{
+        gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
         legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
         swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
     } & {
@@ -118,16 +133,17 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
         showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
         showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
     } & {
-        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
-        fontSize: import("@motionscript/sdk").Type<number, number, false>;
-        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+        legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
     } & {
-        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
-        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
     } & {
-        barRadius: import("@motionscript/sdk").Type<number, number, false>;
+        barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
+        barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
         barWidth: import("@motionscript/sdk").Type<number, number, false>;
         barGap: import("@motionscript/sdk").Type<number, number, false>;
     } & {
@@ -168,6 +184,9 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
     readonly valueAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
     readonly categoryAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
     readonly style: import("@motionscript/sdk").Type<_StyleInput<{
+        gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
         legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
         swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
     } & {
@@ -177,21 +196,25 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
         showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
         showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
     } & {
-        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
-        fontSize: import("@motionscript/sdk").Type<number, number, false>;
-        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+        legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
     } & {
-        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
-        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
     } & {
-        barRadius: import("@motionscript/sdk").Type<number, number, false>;
+        barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
+        barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
         barWidth: import("@motionscript/sdk").Type<number, number, false>;
         barGap: import("@motionscript/sdk").Type<number, number, false>;
     } & {
         values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
     }>, _StyleValues<{
+        gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
         legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
         swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
     } & {
@@ -201,16 +224,17 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
         showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
         showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
     } & {
-        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
-        fontSize: import("@motionscript/sdk").Type<number, number, false>;
-        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+        legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
     } & {
-        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
-        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
     } & {
-        barRadius: import("@motionscript/sdk").Type<number, number, false>;
+        barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
+        barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
         barWidth: import("@motionscript/sdk").Type<number, number, false>;
         barGap: import("@motionscript/sdk").Type<number, number, false>;
     } & {
@@ -236,6 +260,9 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
     readonly valueAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
     readonly categoryAxis: import("@motionscript/sdk").Type<AxisDomainConfig, AxisDomainConfig, false>;
     readonly style: import("@motionscript/sdk").Type<_StyleInput<{
+        gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
         legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
         swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
     } & {
@@ -245,21 +272,25 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
         showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
         showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
     } & {
-        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
-        fontSize: import("@motionscript/sdk").Type<number, number, false>;
-        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+        legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
     } & {
-        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
-        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
     } & {
-        barRadius: import("@motionscript/sdk").Type<number, number, false>;
+        barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
+        barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
         barWidth: import("@motionscript/sdk").Type<number, number, false>;
         barGap: import("@motionscript/sdk").Type<number, number, false>;
     } & {
         values: import("@motionscript/sdk").Type<"end" | "inside" | "none", "end" | "inside" | "none", false>;
     }>, _StyleValues<{
+        gridBackground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+    } & {
         legend: import("@motionscript/sdk").Type<"right" | "top" | "bottom" | "none", "right" | "top" | "bottom" | "none", false>;
         swatch: import("@motionscript/sdk").Type<"square" | "circle" | "line", "square" | "circle" | "line", false>;
     } & {
@@ -269,16 +300,17 @@ export declare const BarChart: import("@motionscript/sdk").Component<"barChart",
         showXAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
         showYAxis: import("@motionscript/sdk").Type<boolean, boolean, false>;
     } & {
-        fontFamily: import("@motionscript/sdk").Type<string, string, false>;
-        fontSize: import("@motionscript/sdk").Type<number, number, false>;
-        fontWeight: import("@motionscript/sdk").Type<number, number, false>;
+        legendText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        xTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yLabelText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        yTitleText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
+        valueText: import("@motionscript/sdk").Type<_TextStyle, _TextStyle, false>;
     } & {
-        palette: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
-        foreground: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        muted: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
-        background: import("@motionscript/sdk").Type<_Fill, _FillResolved[], false>;
+        seriesFills: import("@motionscript/sdk").Type<_Fill[], _FillResolved[][], false>;
     } & {
-        barRadius: import("@motionscript/sdk").Type<number, number, false>;
+        barCornerRadius: import("@motionscript/sdk").Type<_RectCornerRadius, _CornerRadiusResolved, false>;
+        barCornerStyle: import("@motionscript/sdk").Type<_RectCornerStyle, _CornerStyleResolved, false>;
         barWidth: import("@motionscript/sdk").Type<number, number, false>;
         barGap: import("@motionscript/sdk").Type<number, number, false>;
     } & {

package/dist/bar-chart/bar-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../src/bar-chart/bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,UAAU,EACf,KAAK,MAAM,EACX,KAAK,KAAK,EAEV,KAAK,MAAM,EACX,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,IAAI,IAAI,KAAK,EAClB,KAAK,YAAY,IAAI,aAAa,EAClC,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,cAAc,IAAI,eAAe,EAEtC,KAAK,UAAU,IAAI,WAAW,EAC9B,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAWL,KAAK,gBAAgB,EAErB,KAAK,kBAAkB,EACxB,MAAM,eAAe,CAAA;AAgBtB,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,UAAU,CAAA;AAEjB,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAId,CAAA;AAED,oCAAoC;AACpC,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,SAAS,CAAC,CAAA;AAEnD,sDAAsD;AACtD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,SAAS,EAAE,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAA;IACxB,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAA;CACrC;AAED,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAA;AAsB/C,gHAAgH;AAChH,wBAAgB,cAAc,CAAC,CAAC,EAAE,cAAc,GAAG,cAAc,CAOhE;AA6HD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ;;;;IAOjB,8GAA8G;;IAE9G,mHAAmH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnH,gFAAgF;;IAEhF,wFAAwF;;;IAGxF,6HAA6H;;IAE7H,4GAA4G;;;;;;;;;;;;;;;;;;;;;IAd5G,8GAA8G;;IAE9G,mHAAmH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnH,gFAAgF;;IAEhF,wFAAwF;;;IAGxF,6HAA6H;;IAE7H,4GAA4G;;;;;;IAd5G,8GAA8G;;IAE9G,mHAAmH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnH,gFAAgF;;IAEhF,wFAAwF;;;IAGxF,6HAA6H;;IAE7H,4GAA4G;;;;;;;;;;;;;;;;;0BA+N9G,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,QAAQ,CAAC,CAAA"}
+{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../src/bar-chart/bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,UAAU,EACf,KAAK,MAAM,EACX,KAAK,KAAK,EAEV,KAAK,MAAM,EACX,KAAK,WAAW,IAAI,YAAY,EAChC,KAAK,SAAS,IAAI,UAAU,EAC5B,KAAK,oBAAoB,IAAI,qBAAqB,EAClD,KAAK,mBAAmB,IAAI,oBAAoB,EAChD,KAAK,gBAAgB,IAAI,iBAAiB,EAC1C,KAAK,eAAe,IAAI,gBAAgB,EACxC,KAAK,IAAI,IAAI,KAAK,EAClB,KAAK,YAAY,IAAI,aAAa,EAClC,KAAK,MAAM,IAAI,OAAO,EACtB,KAAK,cAAc,IAAI,eAAe,EAEtC,KAAK,UAAU,IAAI,WAAW,EAC9B,KAAK,WAAW,IAAI,YAAY,EACjC,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAWL,KAAK,gBAAgB,EAErB,KAAK,kBAAkB,EACxB,MAAM,eAAe,CAAA;AAkBtB,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,UAAU,CAAA;AAEjB,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAId,CAAA;AAED,oCAAoC;AACpC,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,SAAS,CAAC,CAAA;AAEnD,sDAAsD;AACtD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,CAAA;IAC3B,QAAQ,CAAC,MAAM,EAAE,SAAS,EAAE,CAAA;IAC5B,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAA;IACxB,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAA;CACrC;AAED,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAA;AAsB/C,gHAAgH;AAChH,wBAAgB,cAAc,CAAC,CAAC,EAAE,cAAc,GAAG,cAAc,CAOhE;AA8HD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ;;;;IAOjB,8GAA8G;;IAE9G,mHAAmH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnH,gFAAgF;;IAEhF,wFAAwF;;;IAGxF,6HAA6H;;IAE7H,4GAA4G;;;;;;;;;;;;;;;;;;;;;IAd5G,8GAA8G;;IAE9G,mHAAmH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnH,gFAAgF;;IAEhF,wFAAwF;;;IAGxF,6HAA6H;;IAE7H,4GAA4G;;;;;;IAd5G,8GAA8G;;IAE9G,mHAAmH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnH,gFAAgF;;IAEhF,wFAAwF;;;IAGxF,6HAA6H;;IAE7H,4GAA4G;;;;;;;;;;;;;;;;;0BAkO9G,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,QAAQ,CAAC,CAAA"}

package/dist/bar-chart/bar-chart.js

@@ -7,12 +7,12 @@ import { SERIES_ARG, asParts, fresh } from "../kit/entries.js";
 import { HorizontalAxis } from "../kit/horizontal-axis.js";
 import { DEFAULT_MARKERS, ENTER_SHARE, beats, legendAway } from "../kit/motion.js";
 import { SPOTLIGHT_DIM, formatMarker, lerpAxisDomain, lerpAxisEntry, markerStep, markerValues, niceTicks, num, resolveAxisDomain, settleAxisDomain, } from "../kit/shared.js";
-import { CARTESIAN_GRID, CHART_COLORS, CHART_LEGEND, CHART_STYLE_FAMILY, CHART_STYLE_PRESETS, CHART_TEXT, axisConfigOf, legendConfigOf, seriesFill, valueText, } from "../kit/style.js";
+import { CARTESIAN_GRID, CARTESIAN_TEXT, CHART_LEGEND, CHART_SERIES, CHART_STYLE_FAMILY, CHART_STYLE_PRESETS, GRID_BACKGROUND, axisConfigOf, migrateChartStyle, legendConfigOf, seriesFill, valueText, } from "../kit/style.js";
 import { VerticalAxis, axisPads } from "../kit/vertical-axis.js";
 import { CategoryAxis, slotCentre } from "./category-axis.js";
 import { ChartBars } from "./chart-bars.js";
 import { BAR_LABELS, BAR_MARKS, barCategories, barSpans, resolveBarScale, } from "./shared.js";
-const BAR_STYLE = Types.style(CHART_STYLE_FAMILY, { colors: CHART_COLORS, text: CHART_TEXT, grid: CARTESIAN_GRID, marks: BAR_MARKS, labels: BAR_LABELS, legend: CHART_LEGEND }, { presets: CHART_STYLE_PRESETS });
+const BAR_STYLE = Types.style(CHART_STYLE_FAMILY, { series: CHART_SERIES, background: GRID_BACKGROUND, text: CARTESIAN_TEXT, grid: CARTESIAN_GRID, marks: BAR_MARKS, labels: BAR_LABELS, legend: CHART_LEGEND }, { presets: CHART_STYLE_PRESETS });
 function drawnValue(s, domain) {
     const divisions = (domain.ticks?.length ?? DEFAULT_MARKERS) - 1;
     const range = resolveBarScale(s.data, s.series, s.stack, domain.range, divisions);
@@ -108,6 +108,7 @@ function seriesBars(s, index, plot) {
             from: valueToPx(domain, along, span.from),
             to: valueToPx(domain, along, span.to),
             round: span.outer,
+            grounded: !stacked || span.from === 0,
             caption,
         };
     });
@@ -193,6 +194,7 @@ export const BarChart = component2d({
         weights: (state) => state.series.map((s) => ((s.enabled ?? true) ? 1 : 0)),
         showing: (state) => state.series.map((s) => s.enabled ?? true),
     },
+    migrate: { style: migrateChartStyle("cartesian") },
     allowedChildren: [],
     children: (state) => {
         const style = () => state.style;
@@ -262,12 +264,13 @@ export const BarChart = component2d({
             baseline: () => valueToPx(domain(), runs(state, plotSize()).along, baselineValue(domain())),
             horizontal,
             fill: () => seriesFill(style(), s, i),
-            cornerRadius: () => style().barRadius,
+            cornerRadius: () => style().barCornerRadius,
+            cornerStyle: () => style().barCornerStyle,
             growth: () => state.growth,
             dims: () => categoryDims(state),
             // A figure past a stack's end prints the stack's total; a percent stack has none worth printing, so prints its shares inside.
             values: () => (built.values === "end" && state.stack === "percent" ? "inside" : built.values),
-            valueStyle: () => ({ ...valueText(style()), fontSize: Math.round(style().fontSize * 0.85) }),
+            valueStyle: () => valueText(style()),
             enabled: () => state.showing[i] ?? (s.enabled ?? true),
         }));
         const legendAt = built.legend;
@@ -286,7 +289,7 @@ export const BarChart = component2d({
         plot = new Rect({
             children: [
                 new ChartCanvas({
-                    fill: () => style().background,
+                    fill: () => style().gridBackground,
                     xGridStroke: () => style().verticalGrid,
                     yGridStroke: () => style().horizontalGrid,
                     xMarkers: horizontal ? () => domain().ticks : boundaries,
@@ -302,6 +305,7 @@ export const BarChart = component2d({
         });
         return asParts([
             cartesianFrame({
+                background: () => style().background,
                 left,
                 ghost,
                 plot,