Overriding styles

The components render into the light DOM, so plain CSS reaches every part of them. Their own rules sit in golemui.* cascade layers, and CSS outside any layer beats layered CSS whatever its specificity: your selectors win without !important or extra specificity.

For a change that applies everywhere, such as a color or a size, set a design token instead. Override a rule when no token covers it.

Plain selectors

Select the element by its tag, then its parts by their public classes:

gui-textinput .gui-widget-input {
  border-width: 2px;
}

gui-textinput .gui-label__text {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Each component page lists its parts and their classes under Anatomy. Many parts share a class across elements, so one rule can restyle them all:

Class	Part
gui-field	The element of a field. It lines the field’s parts up in a grid row.
gui-label	The label, with its text and the hint.
gui-label__text	The label text and the required marker.
gui-widget	The box around the control.
gui-widget-input	The part that looks like a field.
gui-widget-icon	An icon.
gui-validator	The errors container.
gui-validator__error	One error message.

The classes of a single element follow BEM: gui-<block>, gui-<block>__<part> and gui-<block>--<modifier>, such as gui-pills__pill or gui-textinput--icon.

States

The states are attributes, as on native controls, so select them the same way:

/* An invalid field. */
gui-textinput .gui-widget-input[aria-invalid='true'] {
  background: var(--gui-intent-error-bg);
}

/* The selected tab. */
gui-tab[aria-selected='true'] {
  font-weight: 600;
}

/* A disabled control. */
gui-select select:disabled {
  cursor: not-allowed;
}

Don’t select by id. The ids of an element’s parts derive from its uid, or from a generated id such as gui-textinput-3 when it has none, which can change from one page load to the next.

Global resets

A global reset outside any layer, such as input { all: unset; }, beats the component styles too. Put your resets in a layer that ranks below the GolemUI Components layers, so the component styles still apply over them. The first declaration of a layer fixes its rank, so this one must come before the GolemUI Components stylesheet, for example at the top of a CSS file you load first:

@layer reset, golemui;

@layer reset {
  input {
    all: unset;
  }
}

golemui here is the parent of every golemui.* layer, so the reset ranks below all of them.

Starting from scratch

To replace the whole look rather than adjust it, leave the stylesheet out and style the anatomy classes yourself. See Stylesheets.