brontoui
GitHub
Docs Reference & maintenance

Upgrade from 0.11 to 0.12

0.12 replaces the categorical palette and adds a runtime resolver for renderers. Classes and core tokens are unchanged; the structured changes are in MIGRATIONS.json. If you are coming from 0.10, apply the 0.11 migration first.

Review charts that relied on series 1 being the accent

Until 0.11, --chart-1 was var(--accent) and series 2–8 were Okabe-Ito. From 0.12 the eight slots are fixed hues: blue, orange, aqua, yellow, magenta, green, violet, red. No slot is the accent.

  1. Find uses of --chart-1, range.category[0], charts.<theme>.categorical[0] and ACCENT from @ponchia/ui/charts. ACCENT is removed.
  2. Where a chart meant "the brand", paint that one mark with the accent through an explicit encoding (brontoVegaAccent(theme), or var(--accent) in SVG), and leave the categorical palette for categories.
  3. Where you pinned --chart-1 to a fixed value to keep the accent out of your data, delete the pin.
  4. brontoVegaAccent(theme) now returns the resolved --accent, and brontoVegaNeutral(theme) the resolved --text-dim. They no longer index range.category.

Sequential ramps have five steps

--chart-seq-6 is removed; --chart-seq-1..5 is one blue hue, step 1 nearest the surface. Re-map a six-bin choropleth or heatmap to five bins, or interpolate between steps in your renderer.

The static Vega config is frameless

brontoVegaConfig() sets view.stroke: null (no plot frame), draws a single series in the first categorical hue, keeps a --panel gap between adjacent rect, arc and area fills, and sets readable label sizes. A spec's own config still wins. Review dashboards that relied on the frame or the accent-coloured default mark.

New: categorical identity and runtime tokens

  • --cat-N, --cat-N-tint and --cat-N-ink carry the same hues for tags, participants and user-chosen tints. Replace hand-picked tag colours, and status tokens borrowed as category colours, with these.
  • @ponchia/ui/renderer resolves the live theme for canvas, WebGL and SVG renderers (readTokens, observeTokens, vegaConfig, xtermTheme). A page that switches skin, contrast or the OLED surface should use it instead of charts.json or the static Vega files. See renderer.