Host styling

How this site brands the grid - mapping the grid's role tokens to its own design tokens, in light and dark.

@workspace/active-grid 11.0.0Status unknowncontent differs from the recorded release 11.0.0baseline ce081dc3

The grid ships one stylesheet in the cascade layer active-grid: its structure, its interaction styles and a neutral light and dark baseline, expressed in --grid-* role tokens. Branding is the host's job: redefine the role tokens, nothing else. The full token list and the rules are in the styling guide.

The mapping this site uses#

This site is built with active-ui, so it maps the grid's roles onto active-ui's tokens in its global stylesheet (apps/docs/app/globals.css):

:is(:root, .grid-root, .grid-portal) {  --grid-background: var(--background);  --grid-foreground: var(--foreground);  --grid-surface: var(--card);  --grid-popover: var(--popover);  --grid-popover-foreground: var(--popover-foreground);  --grid-muted: var(--muted);  --grid-muted-foreground: var(--muted-foreground);  --grid-primary: var(--primary);  --grid-primary-foreground: var(--primary-foreground);  --grid-border: var(--border);  --grid-input-border: var(--input-border);  --grid-ring: var(--ring);  --grid-status-success: var(--success);  --grid-status-success-text: var(--tone-success);  /* … every role the grid declares; see the stylesheet of this site */  --grid-radius: var(--radius);}

• Unlayered, so it wins over the grid's layered baseline whatever the load order.
• On .grid-root and .grid-portal as well as :root, so each var() resolves in the theme the grid or its popup sits in; dark mode follows active-ui's .dark class.
• Roles only. No geometry and no selectors for grid parts: those belong to the grid.

Every grid example on this site uses this mapping; the grid itself carries no knowledge of active-ui.

Accessibility#

The grid's own contrast and focus rules hold for its baseline. A host mapping changes the colours: check that text on --grid-background, --grid-header-bg and selected rows still reaches WCAG AA, and that --grid-ring stays visible against the surfaces it outlines. The axe checks of this site run over the grid examples in light and dark.