Data visualization
Chart series tokens for Aura charts — accent and status contrast, gray grid and ticks, 250ms motion.
Charts use the same color, type, and motion rules as the rest of Aura. Families live in the Charts section: area, bar, line, pie, radar, radial, and tooltips. They are drawn with Recharts and the @aura/chart container.
Series
Five series tokens live on :root in packages/registry/styles/globals.css. They point at colors that already exist, so a theme change retints the chart.
| Token | Points at | Role |
|---|---|---|
--chart-1 | --accent-9 in light; --accent-11 in dark | First series, brand |
--chart-2 | --info-contrast | Second series |
--chart-3 | --success-contrast | Third series |
--chart-4 | --warning-contrast | Fourth series |
--chart-5 | --danger-contrast | Fifth series |
Under .dark and prefers-color-scheme: dark, --chart-1 is --accent-11 (#a3acff). Dark --accent-9 (#4015ca) is 1.99:1 and --accent-10 (#3400ab) is 1.59:1 on --gray-1 (#100b21). Accent-11 is 9.07:1, the first step that clears the 3:1 floor for chart graphics. --chart-2 through --chart-5 use the lighter status-contrast values (#8cb4ff, #67cf9d, #efe08e, #ff9469).
A chart config passes those tokens through. The container writes --color-<series> for the plot. A plain CSS color (#4015ca, rgb(), hsl(), or a named color) is kept. Anything else is dropped, and development builds warn.
Axes, grid, and surface
| Part | Rule |
|---|---|
| Grid | Gray step 6, solid |
| Tick labels | Gray step 11, 13px (text-xs is the utility size; ticks are set at 13px) |
| Tooltip | gray-1 surface, gray step 6 border, rounded-sm. Values use font-mono and tabular-nums |
| Markers | --chart-marker is 8px. The line marker is --chart-marker-line (2px). These are not 13px spacing steps |
| Plot focus | Accent step 8, 2px outline |
| Card | Chart families sit in Card: gray-2 fill, gray step 6 border, --radius-md |
There is no separate annotation, axis-title, or chart-palette scale beyond these five series.
Motion
ChartArea, ChartBar, ChartLine, ChartPie, ChartRadar, and ChartRadialBar animate for 250ms with ease-out. prefers-reduced-motion: reduce sets isAnimationActive to false. The chart stylesheet also shortens CSS animation and transitions on the plot.
What is still open
@aura/data-grid remains a table, with its own type and spacing rules, and is not this chart system.