Skip to main content

Structure

interface GraphTheme {
  id: string;
  colorScheme: 'light' | 'dark';
  values: GraphThemeValues;
  canvasColors: GraphThemeCanvasColor[];
  defaultAnnotationColorIds: GraphThemeAnnotationColorIds;
}
PropertyTypeDescription
idstringUnique identifier for this theme
colorScheme'light' | 'dark'Hint for deriving colors (tinted backgrounds, borders)
valuesGraphThemeValuesDesign tokens (see below)
canvasColorsGraphThemeCanvasColor[]Colors available in annotation color picker
defaultAnnotationColorIdsGraphThemeAnnotationColorIdsDefault colors for new annotations

GraphThemeCanvasColor

interface GraphThemeCanvasColor {
  id: string; // Unique ID, persists across theme changes
  label?: string; // Display name in color picker
  value: string; // Hex color
}

GraphThemeAnnotationColorIds

interface GraphThemeAnnotationColorIds {
  arrowStroke?: string; // Canvas color ID for arrow strokes
  shapeFill?: string; // Canvas color ID for shape fills
}

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
whiteblacktransparent
grey100grey95grey90
grey85grey80grey75
grey70grey60grey50
grey0greyGradient80
green60green50
red60red50
amber70amber50amber40amber30
blue80blue60
purple50purple30

Semantic color tokens

TokenPurpose
brandBrand accent color
successSuccess states
warningWarning states
alertError/alert states
textPrimaryPrimary text
textSecondarySecondary text
textDisabledDisabled text
sunkenBackgroundRecessed surfaces
defaultBackgroundDefault surfaces
raisedBackgroundElevated surfaces
overlayBackgroundOverlay/modal backgrounds
overlayBorderGradientOverlay border gradient
border100Full opacity borders
border10Low opacity borders

Element color tokens

TokenPurpose
Graph
graphBackgroundChart background
Grid
gridLineColorGrid lines
hoverGuideLineColorHover guide lines
originLineColorOrigin/zero line
targetLineColorGoal/target line
targetLineMarkerColorGoal line marker
Legend
legendBackgroundLegend background
legendBorderColorLegend border
legendTextColorLegend text
dimmedSeriesLabelTextColorDimmed series label text
dimmedSeriesLabelLineColorDimmed series label line
Trends
trendPositiveColorPositive trend indicator
trendNegativeColorNegative trend indicator
Tooltips
tooltipBackgroundTooltip background
tooltipBorderColorTooltip border
tooltipHeadingTextColorTooltip heading
tooltipLabelTextColorTooltip labels
tooltipValueTextColorTooltip values
Annotations
defaultArrowAnnotationColorDefault arrow color
annotationFrameBorderColorAnnotation frame border
annotationMenuTriggerIconColorAnnotation menu icon
Chart-specific
graphTypeIconAccentColorGraph type picker accent
heatmapEmptyTileBackgroundHeatmap empty cells
stackedBarHoverBorderColorStacked bar hover border

Fonts

Font tokens are passed to the CSS font 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.
TokenPurpose
fontEditorBodyBody text for editable text
fontHeadingSmSmallest heading size
fontHeadingMdStandard heading size
fontHeadingLgLarge 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.
TokenPurpose
Axes
fontTickLabelAxis tick labels
fontAxisLabelAxis title labels
Data labels
fontDataLabelIn-chart data labels
fontStackTotalStacked bar total labels
Legend
fontLegendLabelLegend item labels
fontSeriesLabelSeries labels
Chart tooltips
fontTooltipHeadingTooltip heading
fontTooltipLabelTooltip row labels
fontTooltipFooterTooltip footer text
fontJumboTooltipLabelJumbo tooltip label
fontJumboTooltipJumbo tooltip value
fontMiniTooltipLabelMini tooltip label
fontMiniTooltipFooterMini tooltip footer
fontTooltipCaptionTooltip caption
fontTooltipCaptionSmallSmall tooltip caption
Trends
fontTrendTagTrend tag text
fontTrendTagSmallSmall trend tag text
Goal lines
fontGoalLineLabelGoal/target line labels
Pie charts
fontPieLabelPie segment labels
fontPieChartTotalPie chart total text
Difference arrows
fontDifferenceArrowSmallSmall difference arrow label
fontDifferenceArrowMediumMedium difference arrow label
fontDifferenceArrowLargeLarge difference arrow label
Button
fontButtonButton text
Forms
fontInputInput field text
fontInputLabelInput field labels
fontSelectLabelSelect dropdown labels
fontSelectDescriptionSelect dropdown descriptions
fontColorSelectLabelColor picker labels
Menus
fontMenuTitleMenu title
fontMenuGroupTitleMenu group heading
fontMenuItemLabelMenu item primary label
fontMenuItemLabelSecondaryMenu item secondary label
UI tooltips
fontUITooltipUI tooltip text
fontUITooltipSecondaryUI tooltip secondary text
Error boundary
fontErrorBoundaryTitleError boundary title
fontErrorBoundaryMessageError boundary message
Tables
fontTableCellTable cell text
fontTableHeaderCellTable header cell text
Footer
fontSourceLabelSource label text
fontSourceLinkSource link text
Text editor
fontTextEditorH1Text editor H1 heading
fontTextEditorH2Text editor H2 heading
fontTextEditorH3Text editor H3 heading
fontTextEditorH6Text editor H6 heading
fontTextEditorBodyText editor body text
fontTextEditorLinkText editor link text
Highlight mode
fontHighlightModeTitleHighlight mode title
fontHighlightModeSubtitleHighlight mode subtitle