The goal is to modernize the current App bar implementation according to the latest MD3 specs. Reuse the already existing theme tokens (typography, colors etc).

Current state

Appbar

MD3 spec: App bars (Top app bar)
Specs link: https://m3.material.io/components/app-bars/specs

Color tokens

• Container background surface (flat) ✅
• surfaceContainer when elevated prop is set ✅
• Leading icon onSurface ✅
• Trailing icons onSurfaceVariant ✅
• Headline onSurface ✅

Spacing / sizing

• Small height 64dp ✅
• Baseline medium height 112dp ✅
• Baseline large height 152dp ✅
• Typography per mode (titleLarge / headlineSmall / headlineMedium) ✅

Behavior

• Medium flexible and Large flexible variants not implemented. Both are part of the M3 Expressive spec (Search app bar is covered by the separate Searchbar component)
• medium and large modes implement the baseline variants, which are explicitly not recommended in M3 Expressive. Flexible counterparts should be added and baselines deprecated
• center-aligned is a separate mode value. M3 Expressive merges it into small as a text-alignment configuration
• elevated is a static boolean. MD3 specifies the container color transitions reactively on scroll (surface to surfaceContainer); no scroll-reactive API is provided
• Subtitle support is @deprecated in v5. M3 Expressive medium flexible and large flexible variants restore subtitle as a supported element
• Image/logo in the container not supported. M3 Expressive anatomy includes image/logo as an optional element
• Filled trailing icon button not supported. M3 Expressive allows a single filled (primary or tonal) icon button in the trailing area

Notes

• Current implementation covers the original M3 set (small, center-aligned, medium baseline, large baseline) but is missing the full M3 Expressive set
• Should be renamed to TopAppBar