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 (--primary) | 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 prefers-color-scheme: dark, --chart-2 through --chart-5 use the lighter status-contrast values (#8cb4ff, #67cf9d, #efe08e, #ff9469) so strokes stay visible on the dark gray canvas. --chart-1 keeps following --accent-9.
A chart config passes those tokens through. The container writes --color-<series> for the plot. Colors that are not a var(--token) are ignored.
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 |
| Plot focus | Accent step 8, 2px outline |
| Card | Chart families sit in Card: gray-2 fill, gray step 6 border, rounded-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.