Charts and chart-like rendering — maps, calendars, heatmaps, mtables — consume a dedicated set of --novem-* primitives. General colour primitives live on the Colors page.
AI assisted, human approved — novem uses AI to review and keep our documentation up to date.
Novem charts pick up most of their styling from the general-purpose
primitives on the Colors page — status indicators,
value sentiment, brand, the categorical palette, surface and text. The
variables on this page cover everything that is specific to chart
rendering: the chart drawing surface, axes, gridlines, legend, tooltips,
annotations and chart shape primitives.
The Aliases column lists named-color tokens that resolve to the
variable when used in API instructions.
The plot area covers the chart drawing surface itself along with the
title, subtitle and caption that sit around it.
| Name | Light | Dark | Aliases |
|---|
--novem-plot-bg | transparent | transparent | — |
--novem-chart-title-color | --novem-text | --novem-text | — |
--novem-chart-subtitle-color | --novem-text-secondary | --novem-text-secondary | — |
--novem-chart-caption-color | --novem-text-muted | --novem-text-muted | — |
Some charts paint positive and negative values in different colours,
the most common examples being waterfall charts, P&L bars and
year-over-year deltas. Novem keeps these tokens distinct from the
diverging-gradient sentiment tokens (--novem-good and --novem-bad)
so a finance theme can saturate its P&L colours without affecting how
heatmaps render.
| Name | Light | Dark | Aliases |
|---|
--novem-bar-positive | --novem-good | --novem-good | — |
--novem-bar-negative | --novem-bad | --novem-bad | — |
| Name | Light | Dark | Aliases |
|---|
--novem-axis-color | #212529 | #dee2e6 | — |
--novem-axis-text | #495057 | #9aa3b3 | — |
| Name | Light | Dark | Aliases |
|---|
--novem-gridline-color | #e9ecef | #2a3a4a | — |
| Name | Light | Dark | Aliases |
|---|
--novem-legend-bg | transparent | transparent | — |
--novem-legend-text | --novem-text | --novem-text | — |
--novem-legend-border | transparent | transparent | — |
| Name | Light | Dark | Aliases |
|---|
--novem-tooltip-bg | #212529 | #dee2e6 | — |
--novem-tooltip-text | #ffffff | #1a1a2e | — |
| Name | Light | Dark | Aliases |
|---|
--novem-annotation-color | --novem-text-secondary | --novem-text-secondary | — |
| Name | Light | Dark | Aliases |
|---|
--novem-map-fill | #e9ecef | #2a3a4a | — |
--novem-map-stroke | #ffffff | #1a1a2e | — |
--novem-map-missing-fill | #adb5bd | #495057 | — |
| Name | Light | Dark | Aliases |
|---|
--novem-calendar-empty-bg | --novem-surface | --novem-surface | — |
Mtable cells are data-driven, so the theme primitives here cover the
fallback cases where a cell has no explicit colour instruction. The
endpoints of diverging cell fills and conditional bar colours come from
the Value sentiment
section on the Colors page.
| Name | Light | Dark | Aliases |
|---|
--novem-cell-default-bg | #808080 | #212121 | — |
--novem-bar-default | --novem-on-light | --novem-on-dark | — |
--novem-bar-divider | --novem-on-light | --novem-on-dark | — |
A handful of non-colour primitives also live with charts. They control
the geometry of axes, gridlines, tooltips, annotations and the chart
marks themselves.
| Variable | Default | Purpose |
|---|
--novem-bar-radius | 0px | Bar corner radius |
--novem-pie-inner-radius | 0 | 0 for a pie, 0.3 to 0.7 for a donut |
--novem-point-size | 4px | Scatter and line point radius |
--novem-line-width | 2px | Line and area stroke width |
--novem-line-curve | linear | linear, monotone, step, etc. |
--novem-axis-font-size | 11px | Axis label size |
--novem-axis-width | 1px | Axis line thickness |
--novem-axis-tick-size | 5px | Tick mark length |
--novem-gridline-width | 1px | Gridline thickness |
--novem-gridline-dash | none | Stroke-dasharray (none for solid) |
--novem-tooltip-radius | 4px | Tooltip border radius |
--novem-annotation-dash | 4 2 | Reference-line stroke-dasharray |