Homework 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.
| Surface | Theme | Exception |
|---|
| Lists & cards | surface / surfaceContainerLow, e-0/e-1 | selected (master-detail) → primaryContainer |
| Status chips | secondaryContainer (active/graded), tertiaryContainer (pending/late), outline (closed/not submitted) | — |
| Grade feedback card | Card.filled secondaryContainer | marks in onSecondaryContainer |
| Warning surfaces (late, regrade, past due) | tertiaryContainer | icon + text, never color-only |
| Destructive (delete/regrade confirm) | error / errorContainer | AppDialog destructive action |
| Component | M3 / Flutter | Tokens | Elev | Radius |
|---|
| HomeworkCard | Card | surfaceContainerLow | e-0/e-1 | r-md |
| Subject chip | Chip | surfaceVariant | — | r-sm |
| Status badge active | Badge | secondaryContainer | — | r-sm |
| Status badge closed | Badge | outline | — | r-sm |
| LateBadge | Badge + icon | tertiaryContainer / tertiary | — | r-sm |
| SubmissionRow | Card + ListTile | surfaceContainerLow | e-0 | r-md |
| GradeFeedbackCard | Card.filled | secondaryContainer | e-1 | r-lg |
| Create/Edit/Submit form fields | TextFormField | fill surfaceVariant, border outline, focus primary | — | r-md |
| Primary CTA (submit/grade) | FilledButton | primary/onPrimary | — | r-md |
| Secondary (submissions, add attachment) | OutlinedButton | outline/onSurface | — | r-md |
| FAB "New homework" | FloatingActionButton.extended | primaryContainer | e-3 | r-full |
| Delete/regrade confirm | AppDialog | surfaceContainerHigh, destructive error | e-4 | r-lg |
| Attachment upload tile | ListTile + LinearProgressIndicator | surfaceVariant track, primary progress | — | r-md |
| Snackbar | SnackBar | inverseSurface | e-5 | r-md |
| Offline banner | AppOfflineBanner | tertiaryContainer | e-1 | — |
| Token | Screen element |
|---|
headlineMedium | screen titles (Homework list, detail header) |
titleLarge | AppBar titles, create-form header |
titleMedium | card titles, submission row names, section headers |
bodyLarge | homework description fallback (pre-markdown) |
bodyMedium | meta lines (class, teacher, due), form labels |
bodySmall | timestamps, "Submitted 3d ago", helper text |
labelLarge | buttons, chips |
labelMedium | badges ("Late · 2d", "Graded") |
displaySmall | marks in GradeFeedbackCard |
mono | marks, attachment sizes (tabularFigures()) |
Material Symbols outlined: assignment, assignment_turned_in, schedule,
event, attach_file, upload_file, download, description, picture_as_pdf,
edit, delete, check_circle, warning, error, refresh, grade, person,
school. Status icons use filled variants (submitted check, graded star).
| Purpose | Token | Applied to |
|---|
| List→detail transition | m-base | navigation |
| Hero on card→detail title | m-slow | detail open |
| Status chip morph | m-fast | submitted→graded |
| Upload progress updates | m-instant | determinate bars |
| Card entrance stagger | m-entrance (40 ms) | list load |
| Badge pop (marks appear) | m-fast | grade result |
| Row removal (delete) | m-base | list |
Rules: reduced-motion substitutes fades/instants (08 §4).
- Body text ≥ 4.5:1; interactive chrome ≥ 3:1 (both modes).
- Dark:
secondaryContainer dark variant (chromatic roles TBD by designer, 02 §1.4);
late badge warning text on warningContainer verified for contrast.
- No sole-color status: every badge pairs icon + text (09 §9).
- Marks read as text, not color (
tabularFigures).
| Class | List | Detail/Forms |
|---|
| phone <600 | single column, FAB, swipe actions | push navigation, full-screen forms |
| 600–839 | 2-col grid | master-detail |
| ≥1200 | 3-col grid or list+detail panes | grade sheet splits: submissions list left, form right |
- No literal
Color/padding/duration in widget code — tokens only
(00-shared/04 §7).
- Tenant branding overrides
primary only; badges derive from roles, not branding.
- Dark mode is a first-class theme (badges re-tinted, contrast re-verified).