Styling the widgets

The widgets carry structure and behaviour, not a look. Everything visual routes through CSS you write in your own stylesheet - there is no theme object, no config file, and no build step.

Two levers, in this order: custom properties for anything you can express as a token, ::part() for anything you cannot.

Custom properties

These cross shadow boundaries, which is what makes them the primary lever: one declaration on a common ancestor themes every widget below it, however deeply nested.

/* Themes every selfstore widget on the page. */
:root {
  --selfstore-accent: #a8490a;
  --selfstore-radius: 10px;
}

Only --selfstore-accent and --selfstore-accent-contrast are true brand decisions. The rest have defaults that already work; set them when your design system says something different.

Parts

Every significant node carries a part name. Style them from your stylesheet with ::part():

selfstore-connect::part(card) {
  border-width: 2px;
}
selfstore-connect::part(button-primary) {
  font-weight: 700;
  letter-spacing: 0.01em;
}

A node can carry several part names

Buttons are the clearest case: a primary button is part="button button-primary". So ::part(button) reaches every button, and ::part(button-primary) reaches only the primary ones. Style the general case once, then override the specific.

The same pattern applies to card / card-active, row / row banner, status / status-ok, link / link-danger, and hint / warn-note.

Shared across widgets

Per widget

The one place ::part() cannot reach

<selfstore-gate> builds its own <selfstore-connect> inside its shadow root, and does not re-export that child’s parts. So:

selfstore-gate::part(gate-card)   { /* works */ }
selfstore-gate::part(card)        { /* does NOT reach the connect cards */ }

Custom properties are unaffected - they inherit through every shadow boundary - so theming the gate’s destination cards works exactly as it does anywhere else:

selfstore-gate {
  --selfstore-accent: #a8490a;   /* reaches the connect inside */
  --selfstore-radius: 10px;
}

If you need ::part() on the connect journey specifically, mount <selfstore-connect> yourself instead of the gate, and decide when to show it.

Dark mode comes free

The widgets set font: inherit and color: inherit on their host, and derive their neutral tones from currentColor with color-mix(). Panels and menus use the Canvas and CanvasText system colours.

So a widget inside a dark page is dark, with no configuration - provided your page actually sets a color on an ancestor. The one thing to check when you switch themes is your accent’s contrast against the new ground:

:root {
  --selfstore-accent: #a8490a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --selfstore-accent: #f59e0b;
    --selfstore-accent-contrast: #1c1305;
  }
}

They respond to their own width, not the viewport’s

Each widget’s stack declares container-type: inline-size, and the internal layout switches below 480px of the widget’s own width. A widget dropped into a 320px sidebar stacks correctly on a 4K screen, and you write no media query.

Two consequences worth knowing: sizing the widget’s container is enough to change its layout, and a widget will not react to a viewport breakpoint you define - it reacts to the box you give it.

A worked example

/* One block, every widget on the page. */
:root {
  --selfstore-accent: #a8490a;
  --selfstore-accent-contrast: #ffffff;
  --selfstore-radius: 10px;
  --selfstore-gap: 0.7rem;
}

/* Match the app's own button shape. */
selfstore-connect::part(button),
selfstore-backups::part(button) {
  font-weight: 650;
  padding-inline: 1.15rem;
}

/* The gate is a full-screen moment: give it the app's paper, not the system canvas. */
selfstore-gate {
  --selfstore-gate-backdrop: #faf9f7;
  --selfstore-gate-width: 34rem;
}

What you cannot do

There is no way to reorder or remove an internal node with CSS, and no slot for injecting markup mid-journey (the gate’s three slots are the exception, and they sit around the journey, not inside it). If a screen needs a different shape rather than a different look, that is the signal to drive selfstore/flows and render it yourself - the widgets are a thin skin over exactly that API.