Types

Import these from @grafloria/renderer.

Types

CascadeLayer

Also has every member of String, listed on its own entry.

ts
Copy
type CascadeLayer = (typeof CASCADE_ORDER)[number];

ColorMode

Also has every member of String, listed on its own entry.

The prop. 'system' follows the OS and re-themes when it changes.

ts
Copy
type ColorMode = 'light' | 'dark' | 'system';

NamedStyle

Also has every member of NodeStyle, listed on its own entry.

A named style may carry node properties, link properties, or the ones they share.

ts
Copy
type NamedStyle = Partial<NodeStyle> | Partial<LinkStyle>;

ThemeToken

Also has every member of String, listed on its own entry.

Every themed value the built-in stylesheet paints.

Naming: <entity>[.<state>].<property> — mirrors the CSS var it maps to, so node.selected.fill ⇄ --grafloria-node-selected-fill.

ts
Copy
type ThemeToken =

  | 'node.fill'
  | 'node.stroke'
  | 'node.strokeWidth'
  | 'node.selected.fill'
  | 'node.selected.stroke'
  | 'node.selected.strokeWidth'
  | 'node.highlighted.fill'
  | 'node.highlighted.stroke'
  | 'node.highlighted.strokeWidth'
  | 'node.hovered.fill'
  | 'node.hovered.stroke'
  | 'node.disabled.fill'
  | 'node.disabled.stroke'
  | 'node.disabled.opacity'
  | 'node.error.fill'
  | 'node.error.stroke'

  | 'link.stroke'
  | 'link.strokeWidth'
  | 'link.selected.stroke'
  | 'link.selected.strokeWidth'
  | 'link.highlighted.stroke'
  | 'link.highlighted.strokeWidth'
  | 'link.hovered.stroke'

  | 'label.fontFamily'
  | 'label.fontSize'
  | 'label.color'

  | 'port.fill'
  | 'port.strokeWidth'
  | 'port.input'
  | 'port.output'
  | 'port.bi'
  | 'port.emphasis.strokeWidth'
  | 'port.emphasis.opacity';

TokenBridge

A mapping from a Grafloria token to a CSS value in the HOST's vocabulary.

The key is a theme token ('node.fill', 'category.critical') — the same grammar themeRef() uses, so there is one token namespace to learn. A raw --grafloria-* custom property name is accepted too, for the odd variable a caller wants to set directly.

The value is CSS, verbatim: var(--card), hsl(var(--primary)), oklch(var(--accent)), or a plain #hex. It is NOT resolved by us — the browser does it, which is exactly why a host token that changes (a theme toggle in the host app!) also changes the diagram, live and for free.

ts
Copy
type TokenBridge = Partial<Record<ThemeToken, string>> & Record<string, string>;