Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

11 — Design System Mapping (Library Module)

How the module maps to tokens and components of 00-shared/02 (tokens), 00-shared/03 (components), 00-shared/04 (system). No new tokens are invented; status colors are the only semantic additions and they bind to existing palette semantics (success/warning/error/neutral).

1. Semantic status → token mapping

Domain stateSemanticsToken classUsed on
BookStatus.availablesuccesscolor-successAvailabilityBadge
BookStatus.borrowedinfo/warningcolor-infoBook status badge
BookStatus.damaged / losterrorcolor-errorBook status badge (issue disabled)
BorrowStatus.activeinfocolor-inforecord chip
BorrowStatus.returnedneutralcolor-neutralhistory chip
Overdue (derived)errorcolor-error + type-style-dangerOverdueTag
FineStatus.pendingwarningcolor-warningFineChip
FineStatus.paidsuccesscolor-successFineChip
FineStatus.waivedneutralcolor-neutralFineChip

Enum sources: book.schema.ts:7-12, borrow-record.schema.ts:7-18.

2. Typography mapping

UI elementText style (tokens)
Book title (detail)text-headline
Book title (row/card)text-title
Author · ISBN (rows)text-body muted
Metadata (publisher/category/edition/shelf)text-body muted, labeled rows
Availability badgetext-label (bold), on color-* surfaces
Due date (active card)text-body emphasized + type-style-danger when overdue
Fine amountstext-label monospace-ish (numbers), tabular figures (proposed)
Info banner (overdue-derived notice)text-caption on info surface

3. Spacing / shape / elevation

  • Catalog rows: standard list density (space-sm gutters); cards on wide layouts.
  • Sheets: standard bottom-sheet padding; forms ≤ 480 dp centered on large screens.
  • Availability badge: pill shape (shape-pill), size-sm.
  • Fine summary panel: inset panel elevation-1 with divider.

4. Iconography

IconMeaningBindings
menu_book / bookcatalog rows, empty stateS1/S5
searchsearch barS1
addFAB "Add book"S1
swap_horiz / assignmentissue/return actionsS4/S6
event / calendar_todaydue date displayS5
warningoverdue + derived-data bannerS7
payments / receiptfine payS5/S6
check_circlepaid fine chipS5/S6

5. Component instance map (00-shared/03)

Shared componentInstance(s) in libraryModule-specific override
AppSearchBarS1 catalog searchdebounce 300 ms
AppListTileS1 rows (via BookRow)trailing badges
AppCardS5/S7 BorrowRecordCard, S2 headerdue-date emphasis
AppBadgestatus/availability/fine chipscolor mapping per §1
AppBottomSheetS4 issue, S6 returnnon-dismissible while submitting
AppDialogdelete confirm, fine-pay confirmdestructive tone on delete
AppFABS1 "Add book"gated by books.create
AppEmptyStateno books / no borrows / 404per-state copy
AppSkeletonlist + detail loadingbook-shaped rows
AppOfflineBannerall readscache fallback
AppDateFieldS4 due datemin = tomorrow, default +14 d
AppPickerS4 StudentPickersearchable
AppMenuS2 overflow (Edit/Delete)permission-gated entries

6. Theming notes

  • No library-specific theme; all screens consume the global tokens; status colors derive from existing semantic classes (§1) so dark mode/contrast come free (00-shared/02).
  • Fine "units" rendering: plain numerals, no currency glyph (no server currency contract — library.service.ts:25).