theme to GraphProvider or to createGraphyKit, restyles every graph it draws: its stylesheet, color palettes and config defaults sit beneath the spec’s own. The Themes section covers the themes that ship. The chrome tokens are the CSS custom properties the renderer writes onto the chart wrapper for the HTML around the plot (legend, tooltip, headline, footer, editor UI), and colorScheme selects them. Everything the chart itself draws, its font families included, is on the Styling page.
Color scheme
colorScheme picks the chrome token set:
ColorScheme
default:"light"
'light' or 'dark'; the type is exported from @graphysdk/react. A theme
that names its own colorScheme overrides this prop.{ light, dark } stylesheet color and every token() pair resolves inside the plot, and which tones the default palette spreads over touching geoms. A chart switches scheme in one place.
The token contract is exported as vars, for hosts that write their own CSS against the custom properties:
Fonts
Font families reach the chart from the stylesheet:style.graph({ fontFamily })is the chart’s base family. Every text region without a family of its own follows it, in paint and in measurement.style.heading({ fontFamily })is the title and subtitle in the content region (both levels;style.heading.h1and.h2address one). Undeclared, they follow the graph entry. Size, weight, color and line height live here too.style.captionandstyle.sourceare the footer type targets.style.axisLabel,style.tickLabel,style.dataLabel,style.legendItem,style.directLabelandstyle.geom.rule.labeleach take afontFamily: the type inside the plot and on legend pills. See Styling.
The SDK references fonts; it does not load them. Load them on the page (with
@font-face or a font service) before the first measurement. Text measured
while a family is still loading is measured with fallback metrics, and the
layout keeps those numbers.What the chrome tokens cover
Overlay menu
The overlay menu, which'point-and-edit' mode opens beside a selection, has Graphy’s own look in light and dark, separate from the chrome tokens, and keeps the chrome font and text scale whatever the stylesheet sets. A host restyles the menu alone through the editor menu tokens: CSS variables no theme declares, so a value set on :root reaches the menu. A page that places a <div id="graphy_root">, where the chart then portals its menus, can set them on any element holding it instead. Set literal values: a var(--graphy-*) set on :root resolves there, before any theme, and the menu falls back to its own.
The controls in the menu’s rows are compact and take their colors from the editor look. The editor menu tokens do not restyle them, and neither does editorControlHeight: the menu sets its own control height, so that token reaches the editor panel alone.
Every portal the chart opens carries its color scheme as data-graphy-color-scheme, light or dark, so a rule on it gives one scheme’s menus values of their own. This is the only way to tell charts apart: every chart on the page portals its menu into the same container, so a value set on a chart’s own element never reaches its menu.
A value set without a scheme holds in light and dark alike, so set
text whenever you set background, and border whenever you set text: the border follows the editor look’s text, not the menu’s. An unset min-width takes max-width, so setting the max alone sets the menu’s width, narrower or wider. The room beside the selection still caps both widths.
Editor look
The editor panel’s controls and the overlay menu share one look: a warm dark text color on a light surface, or a light one on a dark surface, with that text color as the accent of a switch, a slider and a selected option. The chrome tokens keep it apart from the chart’s own tokens, so the footer, the headline and the difference arrows do not move with it. A host changes it for both with the editor tokens, CSS variables no theme declares. Set them on:root, or on an element that holds both the panel and #graphy_root, where the menu portals. An element that holds only the chart or only the panel reaches one of them.
The controls’ text, their sunken and raised surfaces, their borders and the focus outline are worked out from
surface and text, so set the two together. border outlines the panel only when you set it. The panel pads its content by 8px; a host whose own box already pads it sets padding-x and padding-y to 0px. A React host sets the tokens with a style on the element that holds #graphy_root. A select’s list, which opens in a popup of its own, takes the look’s colors too, its highlighted and selected rows included.
Editor tooltips
Every tooltip the editor draws, on a control’s option or on a toolbar button, reads the editor tooltip tokens the way the overlay menu reads its own: set them on:root, around #graphy_root or on one data-graphy-color-scheme, as literal values.
Tokens only paint
The layout measures text in JS from the built-in token values and the stylesheet, not from the CSS cascade. A host-page override of a font token such as--graphy-font-family changes what paints but not the space the layout reserved for it, so the two disagree. Set type through the stylesheet instead: style.graph({ fontFamily }) reaches paint and measurement alike.
Tokens that carry no paint
A few token names describe paint the stylesheet owns. Use the style entry instead.
The renderer resolves the stylesheet’s
graph background and writes it into the graphBackground CSS variable, so the stylesheet value is what a chart paints.
Two token namespaces
textPrimary and textSecondary each name a chrome token and a stylesheet token. They are independent tables: the chrome pair colors HTML chrome text, while the stylesheet’s textPrimary paints axis and data labels and its textSecondary paints tick labels. If you set one by name and nothing moves, check which namespace you reached for.
Group colors
Group colors are not chrome tokens. They come from the chart’s color scale: an explicitrange on scale.color.discrete, else the theme’s palettes.categorical list, else the built-in palette.
overrides entry that declares fill or stroke sits above the scale, so it decides over the palette. See Styling.
Related
- Styling — the stylesheet on the spec: geoms, grid, axes, background
- Themes — the theme packages and how to pass one
- Provider & renderer — where
themeandcolorSchemeare set