App bar

The inherited Ecology chrome shell, wearing the CBFish skin. It sets a color context from semantic tokens via tone — the brand tone resolves to CBFish navy from --color-primary — then exposes start / default / end slots. This is the shell behind the CBFish public nav.

Inherited .astro import EsaAppBar from '@esa/ecology/esa-app-bar.astro';

Tones

Each tone maps to ecology semantic tokens; CBFish 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 — the CBFish brand header is exactly this.

CB Fish

Dashboard

<EsaAppBar tone="brand" as="header">
  <span slot="start"><strong>CBFish</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>
</EsaAppBar>

API

Prop	Type	Default	Description
`tone`	`'surface' \| 'brand' \| 'brand-strong'`	`'surface'`	Color context. surface → --color-surface/text-primary; brand → --color-primary/text-inverse; brand-strong → --color-surface-inverse/text-inverse. Children inherit the text color.
`contained`	`boolean`	`false`	Constrain the inner row to maxWidth and center it.
`maxWidth`	`string`	`'1556px'`	Inner row max-width when contained.
`as`	`'header' \| 'nav' \| 'footer' \| 'div'`	`'div'`	Semantic host element.