11 — Design System Mapping (Files Module)
- 1. Token usage
- 2. Component → system mapping
- 3. Semantics by state (files-specific)
- 4. Density & adaptive
- 5. a11y mapping (baseline 00-shared/09)
Maps every Files screen/component to the shared design system. Tokens are authoritative in 00-shared/02_Design_Tokens, system mapping in 00-shared/04_Design_System_Mapping. This file adds only files-specific usage.
1. Token usage
| Token group | Files usage |
|---|---|
| Color — primary | Upload CTA fill, active progress bar |
| Color — danger | Delete dialog confirm, error progress, cancel emphasis |
| Color — success | upload/download completion check |
| Color — surface/text | file tiles, detail sheet rows (surface-1 / text-primary-secondary) |
| Color — info | "Large file" warnings |
| Type | file name = title-medium; metadata line = body-small + text-secondary |
| Spacing | list rows space-16; sheet padding space-24; card gaps space-8 |
| Radius | sheets/cards use radius-lg; progress card radius-md |
| Elevation | bottom sheets per tokens; cards flat in list |
| Motion | m-fast / m-base as per 10_Interaction_Specification.md |
| Icons | FileTypeIcon uses the token icon set + mime map |
2. Component → system mapping
| Files component | System basis (00-shared/03) | Files-specific extension |
|---|---|---|
| FileTile | AppListTile | + FileTypeIcon, size/date subline, conditional menu items |
| UploadSheet | AppBottomSheet + AppButton | + picker rows, preview card, validation |
| UploadProgressCard | AppProgress + AppButton(text) | + bytes counter, cancel |
| DownloadManagerSheet | AppBottomSheet + AppProgress | + per-task list (queued/active/done) |
| DeleteConfirmDialog | AppDialog destructive | + file-name interpolated copy |
| EmptyFilesState | AppEmptyState | + attach CTA (conditional) |
| Permission state | AppEmptyState | + lock variant |
| Offline | AppOfflineBanner | global, no module variant |
3. Semantics by state (files-specific)
| State | Color | Icon | Copy pattern |
|---|---|---|---|
| uploading | primary | progress | "Uploading name — 40%" |
| success | success | check | "Uploaded name" / "Downloaded name" |
| error | danger | alert | "Upload failed — retry" |
| empty | neutral | file-outline | "No files yet" |
| locked | neutral dim | lock | "Ask an admin for file access" |
4. Density & adaptive
- Phones: full-width rows, bottom sheets.
- Tablet/desktop: list + detail master-detail; sheets become centered dialogs; hover highlight on rows; larger hit areas for menu.
- Landscape: sheet becomes dialog (per 05_Screen_Inventory.md keyboard/landscape note).
5. a11y mapping (baseline 00-shared/09)
- Progress announced via live region (upload + download).
- File rows: single combined semantics; menu actions exposed.
- Contrast: danger on surface meets AA; progress text ≥
body-smallAA.