> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# GraphTheme

## Structure

```tsx theme={null}
interface GraphTheme {
  id: string;
  colorScheme: 'light' | 'dark';
  values: GraphThemeValues;
  canvasColors: GraphThemeCanvasColor[];
  defaultAnnotationColorIds: GraphThemeAnnotationColorIds;
}
```

| 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

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

## GraphThemeAnnotationColorIds

```tsx theme={null}
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 | | | |
| - | - | - | - |
| `white` | `black` | `transparent` | |
| `gray100` | `gray95` | `gray90` | |
| `gray85` | `gray80` | `gray75` | |
| `gray70` | `gray60` | `gray50` | |
| `gray0` | `grayGradient80` | | |
| `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 |
| `iconPrimary` | Primary icon color |
| `iconSecondary` | Secondary icon color |
| `iconStickerBackground` | Background color for icons with a "sticker" appearance |
| `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 |
| `annotationOutlineColor` | Annotation outline |
| `annotationMenuTriggerIconColor` | Annotation menu icon |
| **Chart-specific** | |
| `heatmapEmptyTileBackground` | Heatmap empty cells |

## Fonts

Font tokens are passed to the CSS `font` property and use the CSS `font` [shorthand syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/font), 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 |
| **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 |
| **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 |
| **Editor panel** | |
| `fontEditorSectionTitle` | Editor panel section title |
| `fontEditorControlLabel` | Editor panel setting label |
| `fontEditorControlValue` | Editor panel control's value |
| `fontEditorCaption` | Editor panel unit or caption |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.