11 — Design System Mapping (Staff Module)
- 1. Module surfaces
- 2. Typography mapping
- 3. Iconography
- 4. Layout tokens
- 5. Status visual grammar (staff-specific)
- 6. Dark mode parity
- 7. Theming rules (enforced, shared)
Extends 00-shared/04_Design_System_Mapping.md with staff-specific widget → token mappings. Theme, typography, iconography, motion, layout: as shared; only module deltas listed.
1. Module surfaces
| Surface | Token | Notes |
|---|---|---|
| List rows / cards | surfaceContainerLow, e-0/e-1, r-lg | AppCard/AppListTile (00-shared/04 §2) |
| Detail header card | surfaceContainerHigh, e-1 | Hero source |
| Selected master-detail row | secondaryContainer highlight | 00-shared/04 §2 (NavigationRail pattern) |
| Status badge fill | active→secondaryContainer, inactive→surfaceVariant, on_leave→tertiaryContainer, terminated→errorContainer | icon+label, never color-only (00-shared/09 §9) |
| Filter chips | selected secondaryContainer, else surfaceVariant | 00-shared/04 §2 |
| FAB | primaryContainer, e-3, 56 dp | 00-shared/04 §2 |
| Deactivate dialog | surfaceContainerHigh, e-4, destructive action error/onError | 00-shared/03 AppDialog |
| Empty states | displaySmall title, bodyMedium onSurfaceVariant | 00-shared/04 §3 |
2. Typography mapping
| Element | Text token | Note |
|---|---|---|
| Screen title "Staff" | headlineMedium | one per screen (00-shared/09 §11) |
| Employee number | mono 14 + tabularFigures | IDs always mono (00-shared/02 §2) |
| Row title / section header | titleMedium | |
| Subtitle (dept • designation) | bodyMedium onSurfaceVariant | |
| Status badge | labelMedium | |
| Form labels / helper | bodyMedium / bodySmall | |
| Dialog title | titleLarge |
3. Iconography
Material Symbols outlined (00-shared/02 §7): badge (staff), groups
(departments), workspace_premium (designations), search, add, edit,
delete, person_off (deactivate), today (joining date), payments/attach_money
(salary grade), schedule (employment type), account_tree (dept ref),
category (designation ref). Status icons filled variant. Every icon paired with
text label or tooltip (00-shared/02 §7).
4. Layout tokens
- List rows 56 dp (00-shared/02 §9); avatar 40 (list), 64 (detail header).
- Screen horizontal padding 16 (phone) / 24 (tablet+); card padding 16; section gap 24 (00-shared/04 §6).
- Form field gap 16; master-detail breakpoint 840 dp.
- FAB above bottom nav (phone); page controls right-aligned (desktop).
5. Status visual grammar (staff-specific)
active → [✓ icon] "Active" secondaryContainer pill
inactive → [– icon] "Inactive" outline pill
on_leave → [⏳ icon] "On leave" tertiaryContainer pill
terminated → [✕ icon] "Terminated" errorContainer pill
Enum source: staff.schema.ts:7-12. Same grammar reused by Teachers
(teacher.schema.ts:7-12).
6. Dark mode parity
Elevation substitutes for color on dark surfaces; badges keep
container-role colors at full contrast; no hardcoded Color — all tokens
(00-shared/04 §7).
7. Theming rules (enforced, shared)
- No literal colors/spacing/durations in widgets.
- Tenant branding overrides
primaryonly (00-shared/02 §1). - Dark mode first-class; goldens at light+dark, 3 sizes (
00-shared/03 §G).