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
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
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
surface(flat) ✅surfaceContainerwhenelevatedprop is set ✅onSurface✅onSurfaceVariant✅onSurface✅Spacing / sizing
titleLarge/headlineSmall/headlineMedium) ✅Behavior
Searchbarcomponent)mediumandlargemodes implement the baseline variants, which are explicitly not recommended in M3 Expressive. Flexible counterparts should be added and baselines deprecatedcenter-alignedis a separatemodevalue. M3 Expressive merges it intosmallas a text-alignment configurationelevatedis a static boolean. MD3 specifies the container color transitions reactively on scroll (surfacetosurfaceContainer); no scroll-reactive API is provided@deprecatedin v5. M3 Expressive medium flexible and large flexible variants restore subtitle as a supported elementNotes