Skip to content
D
Documentation

Themes — constants

reference
1 min readUpdated

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; }

Was this page helpful?