Stylesheets

GolemUI Components are rendered into the light DOM, so their look comes from a regular stylesheet you load once at document level. GolemUI Components never inject styles.

The files

File	What it holds
@golemui/gui-components/index.css	Everything: tokens.css and components.css in one file.
@golemui/gui-components/tokens.css	The design tokens, the --gui-* variables.
@golemui/gui-components/components.css	The styles of every element, which read the tokens.
@golemui/gui-components/themes/clay.css	The optional Clay theme.

Most apps import index.css:

import '@golemui/gui-components/index.css';

Import the two halves on their own when your design system already defines the --gui-* tokens, or when you want to load the tokens earlier than the component styles:

import '@golemui/gui-components/tokens.css';
import '@golemui/gui-components/components.css';

Cascade layers

Every rule sits in a cascade layer. The layers are declared in this order, lowest priority first:

Layer	What it holds
golemui.tokens	The design tokens.
golemui.base	The font and color every element inherits, at zero specificity.
golemui.components	The element styles.
golemui.forms	The styles GolemUI Forms adds for its form container.
golemui.theme	A theme such as Clay, which overrides the tokens.

Each stylesheet declares the whole order before its own layer, so the order holds whichever file loads first. CSS outside any layer beats every layered rule, whatever its specificity, so your own styles always win. See Overriding styles.

Going headless

GolemUI Components work without their stylesheet: they render their markup, handle the keyboard and take part in forms, with the browser’s default look. To build a design from scratch, leave the stylesheet out and style the public classes each component page lists under Anatomy.

To keep the components’ layout and change only their look, load components.css and set the tokens yourself instead: see Design tokens.