11 — Design System Mapping (i18n Module)
- 1. Token usage
- 2. Component → token mapping
- 3. State → token mapping
- 4. Directionality
- 5. Iconography
- 6. Dark mode / density
Maps i18n surfaces to the shared design system (00-shared/02 tokens, 00-shared/04 mapping). Everything here is (planned) console + mobile catalog consumption; the live API has no UI.
1. Token usage
| Token (00-shared/02) | Where |
|---|---|
color.surface/primary/error/warning | per-locale field states (idle / focus / error / amber mismatch) |
color.text.secondary | placeholder checker line, locale endonyms |
radius.sm/md | chips, field cards, coverage ring background |
spacing.3/4 | per-locale field stacking (≥ 12 dp between locale cards) |
type.mono | keys, params, drift table |
type.body | translation values; no forced font family — Indic glyph fallback (07 §8) |
shadow.elevation-1 | editor field cards on tablet master-detail |
2. Component → token mapping
| Component | Tokens / variants |
|---|---|
| AppTextField (translation value) | multiline variant, TextCapitalization.none, autocorrect off, amber outline = mismatch, red = block error |
| AppChips (params) | {days} rendered as days chip, outline variant |
| AppBadge | missing = amber, ok = green, stale = danger outline |
| AppButton | primary = Save, danger = Delete, secondary = Export |
| AppDialog | destructive variant with danger button for delete/demote |
| AppSnackbar | success/error variants; undo action for delete (planned) |
| AppDataTable | default density, sticky header, hover row highlight (desktop) |
3. State → token mapping
| State | Token |
|---|---|
| missing translation | amber outline + amber text label (never color-only, 00-shared/09) |
| error | color.error + icon + text message |
| success | green check + snackbar |
| disabled | disabled palette; Save disabled while pending / conflict |
| permission | locked icon + secondary copy |
4. Directionality
- All 9 supported locales are LTR (
SUPPORTED_LOCALES,i18n.service.ts:11-21). - UI is LTR today;
TextDirectionmust be driven by locale tag, never hardcoded, so an RTL locale (forward-looking) lights up without layout rewrites (07 §1). - Number formatting: use
intl/NumberFormatper locale in the app (15 §3); catalog values must not hardcode digits.
5. Iconography
| Icon | Meaning |
|---|---|
| translate | module icon (console nav) |
| check-circle | per-field saved |
| warning-amber | placeholder mismatch / stale |
| error-red | blocked state |
| cloud-done / cloud-off | sync status |
| globe | locale cards |
6. Dark mode / density
- Console inherits 00-shared/04; coverage ring uses semantic colors only (works in dark).
- Compact density on desktop (data-heavy console): row height 40 dp in key list.
- Text scale to 2.0 enforced on translation fields (00-shared/09).