# Types

Import these from `@grafloria/renderer`.

## Types

### `CascadeLayer`

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

```ts
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
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
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
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
type TokenBridge = Partial<Record<ThemeToken, string>> & Record<string, string>;
```