Skip to main content

​
Structure

interface EditorTheme {
  values: EditorThemeValues;
}
PropertyTypeDescription
valuesEditorThemeValuesDesign tokens (see below)

​
EditorThemeValues

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)). EditorThemeValues contains only element-level font tokens — one per editor UI component. 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. EditorTheme inherits the base and semantic tokens from GraphTheme. Modify these tokens in the graph theme to update multiple elements at once.

​
Font tokens

TokenPurpose
fontInputUnitUnit suffix in numeric inputs
fontInlineErrorInline validation error messages
fontToolbarButtonToolbar button labels
fontGridButtonLabelGrid/layout button labels
fontTextScalePreviewText scale preview labels
fontSectionTitleEditor panel section titles
fontSectionBodyEditor panel section body text
fontControlLabelControl and field labels
fontAccordionTitleAccordion section titles
fontAnnotationButtonAnnotation action button text
fontPaletteLabelColor palette item labels
fontHighlightSelectedSelected highlight mode label
fontDataTableAccessoryData table accessory text
fontNumberControlValueNumeric control value display
fontTabButtonLabelTab button labels
fontSelectedPropertyLabelSelected property indicator label
fontSwitchLabelToggle switch labels
fontDataTableCellData table cell text
fontDataTableHeaderCellData table header cell text