# Constants

Import these from `@grafloria/renderer`.

## Constants

### `BASE_STYLE_RULES`

Every themed rule the renderer ships, in cascade order.

INVARIANT (pinned by svg-renderer.scoped-theme.spec): no rule here may carry a
theme literal — every painted value resolves through `var(--grafloria-*)`, and
every referenced variable is declared in {@link THEME_VARS}. `fill: none` on
links is structural (a link is a stroke, never a fill), not a theme value.

```ts
const BASE_STYLE_RULES: readonly StyleRule[]
```

### `BRIDGEABLE_TOKENS`

Every token a bridge MAY set — the contract a custom bridge is checked against.

```ts
const BRIDGEABLE_TOKENS: ThemeToken[]
```

### `CASCADE_ORDER`

The documented cascade, lowest → highest. Exported for docs/tests.

```ts
const CASCADE_ORDER: readonly ["theme", "type-default", "named-class", "element-inline", "state"]
```

### `DARK_THEME`

Dark Theme
Professional, accessible color palette optimized for dark backgrounds

```ts
const DARK_THEME: Theme
```

### `DEFAULT_THEME_SET`

Default set: our light/dark pair, plus the validated high-contrast pair the
ColorModeController upgrades to when the user asks for more contrast.

The high-contrast entries are populated on purpose. A host that never thinks
about accessibility still gets a real high-contrast theme the moment its user
turns the OS preference on — an a11y default that is opt-OUT, not opt-in.

```ts
const DEFAULT_THEME_SET: ThemeSet
```

### `GRAFLORIA_INSTANCE_ATTR`

Attribute stamped on a diagram's root `<svg>` (and, via
`SVGRenderer.applyInstanceScope()`, on any HTML host that wraps nodes rendered
outside the SVG) carrying the renderer's instance id. Both the variable block
and every rule in the shared stylesheet are scoped through it.

```ts
const GRAFLORIA_INSTANCE_ATTR: "data-grafloria-instance"
```

### `GRAFLORIA_VAR_PREFIX`

Prefix of every custom property this renderer defines.

```ts
const GRAFLORIA_VAR_PREFIX: "--grafloria-"
```

### `HIGH_CONTRAST_DARK_THEME`

Pure white on pure black: the maximum-contrast dark scheme.

```ts
const HIGH_CONTRAST_DARK_THEME: Theme
```

### `HIGH_CONTRAST_LIGHT_THEME`

Pure black on pure white: the maximum-contrast light scheme (21:1 text).

```ts
const HIGH_CONTRAST_LIGHT_THEME: Theme
```

### `LIGHT_THEME`

Light Theme (Default)
Professional, accessible color palette optimized for light backgrounds

```ts
const LIGHT_THEME: Theme
```

### `MEDIA_FORCED_COLORS`

```ts
const MEDIA_FORCED_COLORS: "(forced-colors: active)"
```

### `MEDIA_PREFERS_CONTRAST`

```ts
const MEDIA_PREFERS_CONTRAST: "(prefers-contrast: more)"
```

### `MEDIA_PREFERS_DARK`

```ts
const MEDIA_PREFERS_DARK: "(prefers-color-scheme: dark)"
```

### `THEME_TOKENS`

All tokens, in table order.

```ts
const THEME_TOKENS: ThemeToken[]
```

### `THEME_VARS`

THE table. One entry per token; nothing else in the renderer may invent a
`--grafloria-*` name.

A handful of bindings are CONSTANTS today (`() => 2`): the emphasis
stroke-widths the stylesheet has always hardcoded. Routing them through the
table means a later card can bind them to a real theme token (or let users
override the custom property directly) without touching the stylesheet.

```ts
const THEME_VARS: Record<ThemeToken, ThemeVarBinding>
```

### `WCAG`

WCAG 2.x conformance thresholds.

```ts
const WCAG: { readonly AA_TEXT: 4.5; readonly AA_LARGE: 3; readonly AA_NON_TEXT: 3; readonly AAA_TEXT: 7; readonly AAA_LARGE: 4.5; }
```