App Bar

Tones

Each tone maps to ecology semantic tokens; a spoke re-themes by re-pointing those tokens (e.g. --color-primary, --color-surface-inverse) — never by touching this component.

<EsaAppBar tone="surface">…</EsaAppBar>
<EsaAppBar tone="brand">…</EsaAppBar>
<EsaAppBar tone="brand-strong">…</EsaAppBar>

Slots: start · main · end

The end slot is pushed right with margin-left:auto. This is the whole anatomy of a top bar.

<EsaAppBar tone="brand" as="header">
  <span slot="start"><strong>CB Fish</strong></span>
  <EsaIconLink icon="trees" trailing="chevron-down">Mitigation work</EsaIconLink>
  <EsaIconLink icon="trending-up" trailing="chevron-down">Reporting</EsaIconLink>
  <EsaIconLink icon="credit-card" trailing="chevron-down">Funding</EsaIconLink>
  <EsaIconButton slot="end" icon="search" label="Search" />
  <EsaIconLink slot="end" href="/dashboard" icon="layout-dashboard">Dashboard</EsaIconLink>
  <EsaIconLink slot="end" icon="circle-user" trailing="chevron-down">Angela Zhao</EsaIconLink>
</EsaAppBar>

API

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.