11 — Design System Mapping (Leave Module)
- 1. Color semantics
- 2. Typography (from 00-shared/02)
- 3. Spacing & shape
- 4. Iconography
- 5. Elevation & state layers
- 6. Dark mode & density
- 7. Motion mapping
- 8. Component → design-system traceability
Maps every leave surface to the shared Material 3 token set (00-shared/02 Design Tokens — proposed defaults until a designer finalizes them) and the shared component system (00-shared/03). No hardcoded colors; all module-specific semantic usage is enumerated here.
1. Color semantics
| Semantic | Token (00-shared/02) | Usage |
|---|---|---|
Leave status pending | color.tertiary (+ onTertiary) | StatusChip dot/fill; balance "0 remaining" not used here |
Leave status approved | color.success | StatusChip; calendar day tint; approval confirm button |
Leave status rejected | color.error | StatusChip; rejected row accent; over-entitlement bar |
Leave status cancelled | color.surfaceVariant + onSurfaceVariant | defensive render (unreachable, leave-request.schema.ts:11) |
Substitution assigned | color.primary | SubstitutionTile chip (only reachable state, leave.service.ts:261) |
| Calendar leave-day | color.primaryContainer fill, onPrimaryContainer text | CalendarDayCell |
| Calendar today | color.outline border | today ring |
| Insufficient balance | color.errorContainer + onErrorContainer | ApprovalTile inline chip |
| Info caption ("includes weekends") | color.onSurfaceVariant | request form caption |
2. Typography (from 00-shared/02)
| Element | Style |
|---|---|
| Screen title (AppBar) | text.titleLarge |
| Balance headline number | text.headlineSmall (tabular figures font-feature to avoid width jump) |
| Card title / request range | text.titleMedium |
| Card sub-line (reason, notes, metadata) | text.bodyMedium onSurfaceVariant |
| Chip label | text.labelMedium |
| Caption ("includes weekends", "live balance") | text.bodySmall onSurfaceVariant |
3. Spacing & shape
- Card padding
space.m(16); internal gapsspace.s(8) /space.xs(4). - Chip shape
shape.pill; cardsshape.lg(16) consistent with 00-shared/02. - List row height ≥ 64 dp (48 dp min target).
4. Iconography
| Icon | Use |
|---|---|
Icons.event_busy | request tile leading (or type-code badge text) |
Icons.balance / Icons.pie_chart | balance screen header |
Icons.check_circle_outline / Icons.cancel_outlined | approve / reject actions |
Icons.swap_horiz | substitutions |
Icons.calendar_month | calendar |
5. Elevation & state layers
- Cards:
elevation.level1resting,level2hover (desktop), pressed overlaystateLayer.pressedper M3 (00-shared/02). - Bottom sheets:
elevation.level3; scrimscrim@40%.
6. Dark mode & density
- All tokens are theme-aware (00-shared/02); status colors use light/dark variants automatically.
- Density: list rows
density.comfortableon mobile,density.compacton desktop tablets for the approvals queue (per 00-shared/02).
7. Motion mapping
| Motion token | Where |
|---|---|
m-fast (120 ms) | chip state swap after decision; pull-to-refresh fade |
m-base (200 ms) | screen push; sheet open/close; progress bar fill |
m-slow (300 ms) | calendar month cross-fade on pager |
8. Component → design-system traceability
| Leave component (07) | Shared primitives | Tokens |
|---|---|---|
| StatusChip | AppChips (variant) | color.success/error/tertiary, shape.pill, text.labelMedium |
| BalanceCard | AppCard + LinearProgress | color.primary, text.headlineSmall |
| RequestTile / ApprovalTile | AppListTile + AppBadge + AppMenu | spacing per 03, state layers |
| SubstitutionTile | AppListTile + AppChips | color.primary chip |
| ApprovalActionSheet | AppBottomSheet + SegmentedButton + AppTextField + AppButton | elevation.level3 |
| LeaveTypeCard | AppCard + AppBadge | text.titleMedium |
| CalendarDayCell / MonthGrid | (module-specific) | color.primaryContainer, outline, shape.md |