Maps the module's components/screens to the token set
(00-shared/02_Design_Tokens.md) and M3 widget mapping
(00-shared/04_Design_System_Mapping.md).
| Token | Usage in this module |
|---|
primary/onPrimary | FAB "Add user", primary CTAs (Start import, Save) |
success (= secondary) | active status badge, import success counts |
warning (= tertiary) | suspended badge accent, partial-import banner |
error | suspended badge variant, delete/erase dialog actions, import error counts |
primaryContainer | invited badge, selected role chips, info banners |
surfaceVariant | filter chips unselected, input fills |
inverseSurface | snackbars |
mono (00-shared/02 §2) | row numbers in import error list, erased-*@anonymized.invalid display, member ids |
r-sm…r-full | badges r-sm, cards/inputs r-md, dialogs r-lg, avatar r-full |
e-0…e-5 | list rows e-0, cards e-1, FAB e-3, dialogs e-4 |
m-* motion | per 10_Interaction_Specification.md §4 |
Status (user.schema.ts:7-12) | Badge token | Icon | Label |
|---|
active | success container | check | Active |
inactive | outlined neutral | circle-off | Inactive |
suspended | error/tertiary | ban | Suspended |
invited | primaryContainer | mail | Invited |
Never color-only; every badge pairs icon + text (00-shared/09 §9). Dark-mode
variants per token table (00-shared/02 §1).
| Module component | Flutter |
|---|
UserListTile | ListTile + CircleAvatar (initials) + MenuAnchor |
StatusBadge | custom Container pill (radius r-sm) + Icon + Text |
RoleChips | FilterChip row (Wrap) |
FilterBar | SearchBar + Wrap of chips + ActionChip clear-all |
ImportWizard | custom AppStepper (00-shared/03); step content via AnimatedSwitcher |
CsvPreviewTable | DataTable (desktop) / ListView of ListTiles (phone) |
ImportErrorList | dense ListTile rows, mono row number, Badge count |
PreferencesPanel | SwitchListTile ×3, RadioListTile ×3, DropdownButtonFormField |
AvatarUploader | GestureDetector avatar + showModalBottomSheet (pick/crop) |
TypedConfirmDialog | AlertDialog + TextField + destructive FilledButton |
- List row height ≥ 56 (00-shared/02 §3); dense error rows ≥ 48.
- Screen padding 16/24 (00-shared/04 §6); card gap 12; section gap 24.
- Master-detail breakpoint 840 dp (00-shared/04 §6); filters collapse to a
bottom sheet on phone (< 600 dp).
Material Symbols outlined, 24 dp default (00-shared/02 §7); status icons
filled variant. Icons used: person_add (FAB), upload_file (import),
download (template/errors), edit, block (suspend), delete_forever,
shield_person (erasure), notifications, palette (theme), photo_camera
(avatar). All with labels/tooltips (00-shared/02 §7).
| Element | Token |
|---|
| Screen title "Users" | headlineMedium |
| Row title (displayName) | titleMedium |
| Row subtitle (email) | bodyMedium onSurfaceVariant |
| Badge text | labelMedium |
| Import counts | displaySmall (headline numbers) + bodyMedium captions |
| Error row message | bodyMedium error-container tint |
| Row numbers / ids | mono |
- No literal colors — token references only.
- No literal spacing —
AppSpacing grid.
- No literal durations —
AppMotion.
- Dark mode first-class (badge contrast ≥ 4.5:1 text, ≥ 3:1 UI
00-shared/09 §2).
- Tenant branding overrides
primary only — status colors stay semantic.
| Class | Layout |
|---|
| Phone < 600 dp | single pane; filters in bottom sheet; FAB |
| Tablet 600–839 dp | list + expanded row info; filter chips inline |
| Landscape/desktop ≥ 840 dp | master-detail; pager; hover states; keyboard shortcuts (10_Interaction_Specification.md §2) |