---
id: "packages/active-grid/host-styling"
title: "Host styling"
description: "How this site brands the grid - mapping the grid's role tokens to its own design tokens, in light and dark."
url: "/packages/active-grid/host-styling"
locale: "en"
revision: "4369226c8f8888d3"
---

# Host styling

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](/packages/active-grid/styling).

## The mapping this site uses

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

```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.