Audit module → Material 3 / Flutter / token mapping, extending 00-shared/04.
Every color, type, spacing, elevation, radius, icon, motion reference traces to
00-shared/02_Design_Tokens.md. Diff semantics use the standalone custom roles
success / warning / error (00-shared/02 §1.1).
| Surface | Theme | Exception |
|---|
| List (cards/table) | surface, rows surfaceContainerLow | sticky table header surfaceContainerHigh El-e-2 |
| Realtime-new row flash | primaryContainer transient | back to surface after m-base |
| Diff added | secondary (success) tinted row | text on onSecondary-adjacent surface |
| Diff removed | error tinted row, struck-through | never color-only (icon + label) |
| Diff changed | tertiary (warning) tinted row | — |
| Immutability footnote | bodySmall onSurfaceVariant | — |
| Component | M3 / Flutter | Tokens | Elev | Radius |
|---|
| List card (phone row) | AppCard flat | surfaceContainerLow | e-0 | r-lg |
| Desktop table | custom Table | surface; header surfaceContainerHigh; divider outlineVariant | e-0/e-2 header | — |
| Filter bar | Wrap + dropdowns | fill surfaceVariant, border outline, focus primary | — | r-md |
| Active filter chips | AppChips selected | selected secondaryContainer | — | r-sm |
AuditActionChip | Chip/Badge | category: success/error/tertiary/primaryContainer | — | r-sm |
| Diff row — changed | row + Badge tertiary | tertiary icon change | — | r-sm |
| Diff row — added | row + Badge secondary | secondary icon add | — | r-sm |
| Diff row — removed | row + Badge error | error icon remove + TextDecoration.lineThrough | — | r-sm |
| JSON tree | nested SelectableText | mono; depth indent 16 | — | — |
| Empty state | AppEmptyState | displaySmall title, bodyMedium onSurfaceVariant | — | — |
| Realtime banner | AppBanner info | primaryContainer | e-1 | r-md |
| Snackbars | SnackBar | inverseSurface | e-5 | r-md |
| Token | Screen element |
|---|
headlineMedium | list/detail screen titles |
titleMedium | row action line, section headers |
bodyMedium | actor/time lines, filter labels |
bodySmall | context line (correlationId), footnotes, immutability note |
labelMedium | diff key labels |
mono | actorId, entityId, correlationId, JSON values, table Context column |
Numerals (times, counts) use FontFeature.tabularFigures() (00-shared/02 §2).
Material Symbols outlined; module map: receipt_long (log), manage_search (filter),
history (timeline (proposed)), person/badge (actor), change_circle (diff changed),
add_circle (diff added), remove_circle (diff removed), file_download (export
(planned)), content_copy (copy), filter_alt (filter sheet), bolt/new_releases
(realtime new), keyboard_arrow_right (row chevron).
| Purpose | Token | Applied to |
|---|
| Route push detail | m-base | list→detail |
| Realtime append | m-base + flash | new row |
| First-load stagger | m-entrance (40 ms) | row entrance |
| Filter content swap | m-slow cross-fade | result area |
| JSON expand | m-fast AnimatedSize | detail |
| Hover tint | m-fast | table rows |
Rules: reduced-motion substitutes fades/instants (08 §4); no parallax/stagger.
- All text ≥ 4.5:1; UI chrome ≥ 3:1 (00-shared/09 §2).
- Diff colors on dark: chromatic dark variants TBD by designer (00-shared/02 §1.4);
all text on row surfaces keeps ≥ 4.5:1.
- Never color-only status: every diff badge pairs icon + text (00-shared/09 §9).
- Dark: sticky header
surfaceContainerHigh; JSON mono on surfaceContainerLow.
| Class | Layout |
|---|
| phone < 600 | filter bar in bottom sheet; AuditEntryRow cards; detail pushed |
| 600–839 | filter bar inline; cards 2-column (tablet) |
| 840–1199 | master-detail: list left, detail right pane; table (min-width 720 scrolls) |
| ≥ 1200 | full-width AuditTable (primary target); master-detail; keyboard nav; breadcrumbs |
- Table row height 56 (default) / 40 (dense toggle
(proposed) for compliance scanning).
- Filter bar gap 12; section gap 24; card padding 16 (00-shared/02 §3).
- Touch targets ≥ 48; dense inline controls 44 with tooltips.