11 — Design System Mapping (Attendance Module)
- 1. Status color semantics (single source of truth)
- 2. Module components → M3/Flutter mapping
- 3. Typography mapping
- 4. Layout tokens
- 5. Motion tokens
- 6. Iconography
- 7. Theming rules (attendance-specific)
- 8. Accessibility specifics
Extends 00-shared/04_Design_System_Mapping.md with attendance-specific mappings: status semantics, module components → M3 widgets/tokens, typography, layout, and theming rules. Tokens per 00-shared/02.
1. Status color semantics (single source of truth)
| Status | M3 role | Light token | Dark token | Icon (filled) |
|---|---|---|---|---|
present | success | #16A34A / successContainer | dark variant (§1.4) | check_circle |
absent | error | #BA1A1A / errorContainer | dark variant (§1.4) | block |
late | warning | #F97316 / warningContainer | dark variant (§1.4) | schedule |
half_day | warning | as late (distinct icon) | same | right_half_circle |
leave | neutral | surfaceVariant fg onSurfaceVariant | dark variant | beach_access |
holiday | neutral | surfaceVariant | dark variant | wb_sunny |
unmarked | outline | outline dashed chip | outlineVariant | radio_button_unchecked |
Rules: icon + label always (never color-only, 00-shared/09 §9:76); chip text contrast
≥ 4.5:1 light, ≥ 4.5:1 dark (use on* tokens); error container text #601410 dark.
2. Module components → M3/Flutter mapping
| Component (07) | M3 pattern | Flutter widgets | Tokens |
|---|---|---|---|
AttendanceGrid | Table-like list | ListView.builder + itemExtent, sticky header via SliverPersistentHeader | row 56 dp, surface bg, zebra surfaceVariant 4% |
StatusChip | Filter/Input chip | InkWell + Container (rounded r-full/r-md), AnimatedContainer | *Container role colors, labelLarge |
StatusChipPopover | Bottom sheet | showModalBottomSheet + Wrap of chips | surfaceContainerHigh, e-5, r-xl top |
BatchEditSheet | Bottom sheet | showModalBottomSheet, AppButton | as popover; AppBanner for conflict |
MarkedCountBar | Sticky summary strip | custom Material strip + Wrap chips | surfaceContainerLow, e-2, labelMedium |
StatusFilterChips | Filter chips | FilterChip with Badge counts | selected secondaryContainer, else surfaceVariant |
CalendarHeatmap | Calendar | GridView.builder (7 cols), InkWell cells | cells surfaceVariant/status tints, labelMedium |
DaySummaryCard | Card | Card.filled + AppInfoRows | surfaceContainerLow, e-1, r-lg |
SummaryDonut | Chart | AppCharts (fl_chart wrapper) | 02 chart tokens; Semantics summary |
AbsenceAlertCard | Banner | AppBanner warning | tertiaryContainer |
BiometricDeviceTile | List tile | AppListTile + AppBadge | row 72 dp (device meta) |
UndoBar | Snackbar variant | custom bottom bar / SnackBar with action | inverseSurface |
ReportJobCard | Card + progress | AppCard + LinearProgressIndicator | e-1, primary progress |
3. Typography mapping
| Use | Token | Widget |
|---|---|---|
| Screen title (grid) | headlineMedium | AppBar title |
| Grid subtitle (date + count) | bodyMedium onSurfaceVariant | under title |
| Student name | titleMedium | row title |
| Roll number / admission no | mono (tabular) | row subtitle bodySmall |
| Status chip label | labelLarge | chip text |
| MarkedCountBar chips | labelMedium | counts |
| Heatmap day number | labelMedium | cell |
| Form labels | bodyMedium | popover fields |
4. Layout tokens
- Row height 56 dp; dense a11y mode 44 dp chips (allowed, 02 §9); sheet half-height
(S3) ~ 40% screen; heatmap cell 40×40 min; batch bar 64 dp; sticky elements
e-2(bar) /e-3(FAB). - Grid horizontal padding
Sp 16phone /Sp 24tablet+.
5. Motion tokens
Mo.m-fast status flips; Mo.m-base sheets/bars; Mo.m-instant settle pulse;
Mo.m-entrance first-load stagger (reduced-motion → none). All from 02 §6.
6. Iconography
Material Symbols outlined for chrome; filled for status icons (per component table).
Sizes: 16 dense chips, 20 sheet items, 24 default, 32 empty state, 40 device header.
Every icon paired with a label/tooltip + Semantics (02 §7).
7. Theming rules (attendance-specific)
- Status colors come only from the mapping in §1 — never bespoke hexes in widgets.
- Zebra striping and "was:" transient labels must exist in dark mode too (contrast audit per 00-shared/09 §2).
- Tenant branding (
organization.branding.color) overridesprimaryonly — status colors must remain semantic and readable under any seed (02 §1:39-40). - No hardcoded durations/padding in grid widgets (00-shared/04 §7).
8. Accessibility specifics
- Chips announce state changes (live region),
Semantics(toggled:); heatmap cells announce "20 Jul — 28 present, 2 absent". - Focus rings
primary2 dp offset 2 on all interactive cells (desktop). - 200% text scale: chips collapse to icon + short label; grid stays tabular (00-shared/09 §4).