> ## 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` |           |
| `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                                          |
| `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      |
| `annotationFrameBorderColor`     | Annotation frame border  |
| `annotationMenuTriggerIconColor` | Annotation menu icon     |
| **Chart-specific**               |                          |
| `heatmapEmptyTileBackground`     | Heatmap empty cells      |
| `stackedBarHoverBorderColor`     | Stacked bar hover border |

## 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                 |
| **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       |