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.
tsconst BASE_STYLE_RULES: readonly StyleRule[]
BRIDGEABLE_TOKENS
Every token a bridge MAY set — the contract a custom bridge is checked against.
tsconst BRIDGEABLE_TOKENS: ThemeToken[]
CASCADE_ORDER
The documented cascade, lowest → highest. Exported for docs/tests.
tsconst CASCADE_ORDER: readonly ["theme", "type-default", "named-class", "element-inline", "state"]
DARK_THEME
Dark Theme Professional, accessible color palette optimized for dark backgrounds
tsconst 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.
tsconst 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.
tsconst GRAFLORIA_INSTANCE_ATTR: "data-grafloria-instance"
GRAFLORIA_VAR_PREFIX
Prefix of every custom property this renderer defines.
tsconst GRAFLORIA_VAR_PREFIX: "--grafloria-"
HIGH_CONTRAST_DARK_THEME
Pure white on pure black: the maximum-contrast dark scheme.
tsconst HIGH_CONTRAST_DARK_THEME: Theme
HIGH_CONTRAST_LIGHT_THEME
Pure black on pure white: the maximum-contrast light scheme (21:1 text).
tsconst HIGH_CONTRAST_LIGHT_THEME: Theme
LIGHT_THEME
Light Theme (Default) Professional, accessible color palette optimized for light backgrounds
tsconst LIGHT_THEME: Theme
MEDIA_FORCED_COLORS
tsconst MEDIA_FORCED_COLORS: "(forced-colors: active)"
MEDIA_PREFERS_CONTRAST
tsconst MEDIA_PREFERS_CONTRAST: "(prefers-contrast: more)"
MEDIA_PREFERS_DARK
tsconst MEDIA_PREFERS_DARK: "(prefers-color-scheme: dark)"
THEME_TOKENS
All tokens, in table order.
tsconst 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.
tsconst THEME_VARS: Record<ThemeToken, ThemeVarBinding>
WCAG
WCAG 2.x conformance thresholds.
tsconst 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?