Structure
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for this theme |
colorScheme | 'light' | 'dark' | Hint for deriving colors (tinted backgrounds, borders) |
values | GraphThemeValues | Design tokens (see below) |
canvasColors | GraphThemeCanvasColor[] | Colors available in annotation color picker |
defaultAnnotationColorIds | GraphThemeAnnotationColorIds | Default colors for new annotations |
GraphThemeCanvasColor
GraphThemeAnnotationColorIds
GraphThemeValues
All tokens are strings resolved to CSS values at render time. Any valid CSS value is supported, including CSS variables (e.g.var(--my-brand-color)).
Tokens follow an inheritance hierarchy: Base Tokens define foundational primitives, Semantic Tokens map those primitives to contextual meaning and can be used to update multiple elements at once. Element Tokens target specific UI components for more fine-grained control.
Colors
Base colors
| Token | |||
|---|---|---|---|
white | black | transparent | |
grey100 | grey95 | grey90 | |
grey85 | grey80 | grey75 | |
grey70 | grey60 | grey50 | |
grey0 | greyGradient80 | ||
green60 | green50 | ||
red60 | red50 | ||
amber70 | amber50 | amber40 | amber30 |
blue80 | blue60 | ||
purple50 | purple30 |
Semantic color tokens
| Token | Purpose |
|---|---|
brand | Brand accent color |
success | Success states |
warning | Warning states |
alert | Error/alert states |
textPrimary | Primary text |
textSecondary | Secondary text |
textDisabled | Disabled text |
sunkenBackground | Recessed surfaces |
defaultBackground | Default surfaces |
raisedBackground | Elevated surfaces |
overlayBackground | Overlay/modal backgrounds |
overlayBorderGradient | Overlay border gradient |
border100 | Full opacity borders |
border10 | Low opacity borders |
Element color tokens
| Token | Purpose |
|---|---|
| Graph | |
graphBackground | Chart background |
| Grid | |
gridLineColor | Grid lines |
hoverGuideLineColor | Hover guide lines |
originLineColor | Origin/zero line |
targetLineColor | Goal/target line |
targetLineMarkerColor | Goal line marker |
| Legend | |
legendBackground | Legend background |
legendBorderColor | Legend border |
legendTextColor | Legend text |
dimmedSeriesLabelTextColor | Dimmed series label text |
dimmedSeriesLabelLineColor | Dimmed series label line |
| Trends | |
trendPositiveColor | Positive trend indicator |
trendNegativeColor | Negative trend indicator |
| Tooltips | |
tooltipBackground | Tooltip background |
tooltipBorderColor | Tooltip border |
tooltipHeadingTextColor | Tooltip heading |
tooltipLabelTextColor | Tooltip labels |
tooltipValueTextColor | Tooltip values |
| Annotations | |
defaultArrowAnnotationColor | Default arrow color |
annotationFrameBorderColor | Annotation frame border |
annotationMenuTriggerIconColor | Annotation menu icon |
| Chart-specific | |
graphTypeIconAccentColor | Graph type picker accent |
heatmapEmptyTileBackground | Heatmap empty cells |
stackedBarHoverBorderColor | Stacked bar hover border |
Fonts
Font tokens are passed to the CSSfont property and use the CSS font shorthand syntax, which sets multiple font properties in a single declaration.
Base font tokens
Foundational font properties. Combine these to build higher-level tokens.| Token |
|---|
| Font families |
fontFamilyDefault |
fontFamilyHeading |
| Font weights |
fontWeightRegular |
fontWeightMedium |
fontWeightSemibold |
fontWeightBold |
| Font sizes |
fontXxs |
fontXs |
fontSm |
fontMd |
fontLg |
fontXl |
Semantic font tokens
Named text styles built from base tokens. Override these to update the font style across all elements that use them.| Token | Purpose |
|---|---|
fontEditorBody | Body text for editable text |
fontHeadingSm | Smallest heading size |
fontHeadingMd | Standard heading size |
fontHeadingLg | Large heading size |
Element font tokens
Per-component font tokens that reference semantic tokens. Override these to adjust typography for a specific element without affecting others.| Token | Purpose |
|---|---|
| Axes | |
fontTickLabel | Axis tick labels |
fontAxisLabel | Axis title labels |
| Data labels | |
fontDataLabel | In-chart data labels |
fontStackTotal | Stacked bar total labels |
| Legend | |
fontLegendLabel | Legend item labels |
fontSeriesLabel | Series labels |
| Chart tooltips | |
fontTooltipHeading | Tooltip heading |
fontTooltipLabel | Tooltip row labels |
fontTooltipFooter | Tooltip footer text |
fontJumboTooltipLabel | Jumbo tooltip label |
fontJumboTooltip | Jumbo tooltip value |
fontMiniTooltipLabel | Mini tooltip label |
fontMiniTooltipFooter | Mini tooltip footer |
fontTooltipCaption | Tooltip caption |
fontTooltipCaptionSmall | Small tooltip caption |
| Trends | |
fontTrendTag | Trend tag text |
fontTrendTagSmall | Small trend tag text |
| Goal lines | |
fontGoalLineLabel | Goal/target line labels |
| Pie charts | |
fontPieLabel | Pie segment labels |
fontPieChartTotal | Pie chart total text |
| Difference arrows | |
fontDifferenceArrowSmall | Small difference arrow label |
fontDifferenceArrowMedium | Medium difference arrow label |
fontDifferenceArrowLarge | Large difference arrow label |
| Button | |
fontButton | Button text |
| Forms | |
fontInput | Input field text |
fontInputLabel | Input field labels |
fontSelectLabel | Select dropdown labels |
fontSelectDescription | Select dropdown descriptions |
fontColorSelectLabel | Color picker labels |
| Menus | |
fontMenuTitle | Menu title |
fontMenuGroupTitle | Menu group heading |
fontMenuItemLabel | Menu item primary label |
fontMenuItemLabelSecondary | Menu item secondary label |
| UI tooltips | |
fontUITooltip | UI tooltip text |
fontUITooltipSecondary | UI tooltip secondary text |
| Error boundary | |
fontErrorBoundaryTitle | Error boundary title |
fontErrorBoundaryMessage | Error boundary message |
| Tables | |
fontTableCell | Table cell text |
fontTableHeaderCell | Table header cell text |
| Footer | |
fontSourceLabel | Source label text |
fontSourceLink | Source link text |
| Text editor | |
fontTextEditorH1 | Text editor H1 heading |
fontTextEditorH2 | Text editor H2 heading |
fontTextEditorH3 | Text editor H3 heading |
fontTextEditorH6 | Text editor H6 heading |
fontTextEditorBody | Text editor body text |
fontTextEditorLink | Text editor link text |
| Highlight mode | |
fontHighlightModeTitle | Highlight mode title |
fontHighlightModeSubtitle | Highlight mode subtitle |

