<!-- GENERATED by scripts/check-design-tokens.mjs. Do not edit by hand. -->
# Design tokens

Every CSS custom property the toolkit emits to `:root`. This is the
whole vocabulary; a `var(--g3t-*)` name that is not on this list
resolves to nothing and silently falls back to its literal, which is
why `pnpm run verify:tokens` fails the build on one.

Two functions emit these, and this table is generated from them:

- `injectDesignTokens()` (`@g3-toolkit/core`) for the spatial,
  typographic, and scale constants. Call once at startup.
- `injectCssVariables()` (`@g3-toolkit/react`, via `useThemeStore`
  and `applyTheme`) for everything that changes with the active
  theme. These land on `<html>` by default, or on the element the
  host names as the theme target (`setThemeTarget`, or
  `applyTheme(theme, { target })`), together with `color-scheme`;
  the vocabulary is the same either way.

Values in the "source" column name the constant or theme field
supplying them, not the literal, since the theme-driven half changes
per theme.

## Guarantees

- **Names are stable within a major.** Treat them as public API.
- **Theme-driven tokens change at runtime.** Read them through
  `var()`; do not snapshot them into JS.
- `--g3t-success-muted`, `--g3t-warning-muted`,
  `--g3t-error-muted`, and `--g3t-overlay-color` are optional on
  `G3tTheme`. A custom theme may omit them, in which case they are not
  emitted at all and your `var()` fallback applies. Always pass a
  fallback for these four.
- **Element-scoped properties are not tokens.** A component may set a
  custom property on its own subtree (`--g3t-toggle-accent` on
  `PropertyField`). Those are implementation detail, not vocabulary,
  and are absent from this table by design.

### Color: surfaces and text

| Token | Value source |
| --- | --- |
| `--g3t-bg-primary` | theme.bgPrimary |
| `--g3t-bg-secondary` | theme.bgSecondary |
| `--g3t-bg-tertiary` | theme.bgTertiary |
| `--g3t-border` | theme.border |
| `--g3t-canvas-bg` | theme.canvasBg |
| `--g3t-text-muted` | theme.textMuted |
| `--g3t-text-primary` | theme.textPrimary |
| `--g3t-text-secondary` | theme.textSecondary |

### Color: accent and semantic

| Token | Value source |
| --- | --- |
| `--g3t-accent-color-controls` | theme.accentPrimary |
| `--g3t-accent-hover` | theme.accentHover |
| `--g3t-accent-muted` | theme.accentMuted |
| `--g3t-accent-primary` | theme.accentPrimary |
| `--g3t-color-scheme` | theme.colorScheme |
| `--g3t-error` | theme.error |
| `--g3t-error-muted` | theme.errorMuted |
| `--g3t-selection-highlight` | theme.selectionHighlight |
| `--g3t-success` | theme.success |
| `--g3t-success-muted` | theme.successMuted |
| `--g3t-warning` | theme.warning |
| `--g3t-warning-muted` | theme.warningMuted |

### Color: graph elements

| Token | Value source |
| --- | --- |
| `--g3t-edge-color` | theme.edgeColor |
| `--g3t-edge-selected` | theme.edgeSelectedColor |
| `--g3t-node-label-color` | theme.nodeLabelColor |
| `--g3t-node-stroke` | theme.nodeStroke |
| `--g3t-overlay-color` | theme.overlayColor |

### Color: data scales

| Token | Value source |
| --- | --- |
| `--g3t-div-*` | indexed scale |
| `--g3t-seq-*` | indexed scale |
| `--g3t-type-*` | indexed scale |

### Typography

| Token | Value source |
| --- | --- |
| `--g3t-font` | DESIGN_TOKENS.fontFamily |
| `--g3t-font-lg` | DESIGN_TOKENS.fontSizeLg |
| `--g3t-font-md` | DESIGN_TOKENS.fontSizeMd |
| `--g3t-font-mono` | DESIGN_TOKENS.fontMono |
| `--g3t-font-sm` | DESIGN_TOKENS.fontSizeSm |
| `--g3t-font-weight` | DESIGN_TOKENS.fontWeight |
| `--g3t-font-weight-medium` | DESIGN_TOKENS.fontWeightMedium, |
| `--g3t-font-weight-semibold` | DESIGN_TOKENS.fontWeightSemibold, |
| `--g3t-font-xl` | DESIGN_TOKENS.fontSizeXl |
| `--g3t-font-xs` | DESIGN_TOKENS.fontSizeXs |
| `--g3t-line-height` | DESIGN_TOKENS.lineHeight |

**Font loading is the host's.** `--g3t-font` names IBM Plex Sans and
`--g3t-font-mono` names IBM Plex Mono, each with system fallbacks
(`-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` and
`'Fira Code', 'Consolas', monospace`). Neither stylesheet the package
ships loads a font: `style.css` once carried a Google Fonts `@import`,
and a third-party request on load is unusable offline, under a strict
CSP and on air-gapped deployments. Self-host the two Plex faces or
load them from a CDN in your own document, or override the two tokens
to use a face you already ship; without either, the toolkit renders
in the first fallback that is installed.

### Spacing

| Token | Value source |
| --- | --- |
| `--g3t-space-1` | DESIGN_TOKENS.space1 |
| `--g3t-space-2` | DESIGN_TOKENS.space2 |
| `--g3t-space-3` | DESIGN_TOKENS.space3 |
| `--g3t-space-4` | DESIGN_TOKENS.space4 |
| `--g3t-space-5` | DESIGN_TOKENS.space5 |
| `--g3t-space-6` | DESIGN_TOKENS.space6 |
| `--g3t-space-8` | DESIGN_TOKENS.space8 |

### Radii

| Token | Value source |
| --- | --- |
| `--g3t-radius-full` | DESIGN_TOKENS.radiusFull |
| `--g3t-radius-lg` | DESIGN_TOKENS.radiusLg |
| `--g3t-radius-md` | DESIGN_TOKENS.radiusMd |
| `--g3t-radius-sm` | DESIGN_TOKENS.radiusSm |

### Shadows

| Token | Value source |
| --- | --- |
| `--g3t-shadow-inset` | shadows.shadowInset |
| `--g3t-shadow-lg` | shadows.shadowLg |
| `--g3t-shadow-md` | shadows.shadowMd |
| `--g3t-shadow-sm` | shadows.shadowSm |

### Motion

| Token | Value source |
| --- | --- |
| `--g3t-ease-in-out` | DESIGN_TOKENS.easeInOut |
| `--g3t-ease-out` | DESIGN_TOKENS.easeOut |
| `--g3t-transition-base` | DESIGN_TOKENS.transitionBase |
| `--g3t-transition-fast` | DESIGN_TOKENS.transitionFast |
| `--g3t-transition-slow` | DESIGN_TOKENS.transitionSlow |

### Focus and selection geometry

| Token | Value source |
| --- | --- |
| `--g3t-deemphasized-opacity` | DESIGN_TOKENS.deemphasizedOpacity, |
| `--g3t-focus-ring-offset` | DESIGN_TOKENS.focusRingOffset, |
| `--g3t-focus-ring-width` | DESIGN_TOKENS.focusRingWidth, |
| `--g3t-selection-bar-width` | DESIGN_TOKENS.selectionBarWidth, |
| `--g3t-selection-gap-width` | DESIGN_TOKENS.selectionGapWidth, |
| `--g3t-selection-halo-width` | DESIGN_TOKENS.selectionHaloWidth, |
| `--g3t-selection-highlight` | theme.selectionHighlight |

### Layering

| Token | Value source |
| --- | --- |
| `--g3t-z-dropdown` | DESIGN_TOKENS.zDropdown |
| `--g3t-z-modal` | DESIGN_TOKENS.zModal |
| `--g3t-z-overlay` | DESIGN_TOKENS.zOverlay |
| `--g3t-z-popover` | DESIGN_TOKENS.zPopover |
| `--g3t-z-sticky` | DESIGN_TOKENS.zSticky |
| `--g3t-z-tooltip` | DESIGN_TOKENS.zTooltip |