Page surface

.hui-surface opts a page, or a region of one, into the library’s tokens: the background, the foreground and the font. It is the one class a host almost always needs, and the reason it exists is that Home-UI does not style anybody’s <body> uninvited - a library that repainted the host’s page on import would be impossible to adopt gradually (ISS-001).

Every preview on this site, and every component inside one, sits in a <body class="hui-surface">, which is why the tokens resolve there. A host adopting Home-UI one page at a time puts the class on just the region it has converted.

This is not a component. It is the boundary between the host’s styling and the library’s.

See Dark mode for how the theme is chosen inside that surface, and Colours and tokens for what it brings into scope.

.hui-surface

Opts a page or region into the tokens: background, foreground and font.

<body class="hui-surface"> … </body>