7978970783
Ship the delivery platform UI under modules/delivery with thin app routes, BFF proxy, CRUD for phase 10.0-10.1 APIs, and capability-gated future screens. Co-authored-by: Cursor <cursoragent@cursor.com>
60 lines
2.1 KiB
Markdown
60 lines
2.1 KiB
Markdown
# Delivery Design System
|
|
|
|
Delivery uses the **shared platform design system** (`@/components/ds`) with module-specific tokens only — no duplicated Button/Input/Dialog implementations.
|
|
|
|
## CSS tokens
|
|
|
|
Defined in `frontend/styles/globals.css`:
|
|
|
|
```css
|
|
--delivery-accent: #0891b2; /* light — logistics cyan */
|
|
--delivery-accent-soft: rgba(8, 145, 178, 0.12);
|
|
--delivery-map: #0e7490;
|
|
--delivery-success / warning / danger
|
|
```
|
|
|
|
Dark mode: `--delivery-accent: #22d3ee`
|
|
|
|
**Rule:** Reference `var(--delivery-accent)` in module components; never hardcode hex.
|
|
|
|
## Module design-system (`modules/delivery/design-system/`)
|
|
|
|
| Export | Purpose |
|
|
|--------|---------|
|
|
| `deliveryTokens` | Accent variable references |
|
|
| `DeliveryStatusChip` | Driver + lifecycle status badges |
|
|
| `DeliveryTablePage` | Search, sort, pagination wrapper |
|
|
| `DeliveryStatGrid` | Dashboard stat cards row |
|
|
| `lifecycleStatusLabels` | Persian labels for statuses |
|
|
| `driverStatusLabels` | Driver-specific statuses |
|
|
|
|
## Layout patterns
|
|
|
|
- **Portal shell:** Fixed RTL sidebar (desktop), drawer (mobile), sticky mobile header
|
|
- **Page header:** Title + description + action slot
|
|
- **CRUD list:** Table + create dialog + edit drawer + delete confirm
|
|
- **Phase gate:** Centered card with phase badge — used instead of placeholder/mock data
|
|
- **Map placeholder:** 16:9 aspect map canvas with marker/route badges
|
|
|
|
## Typography & spacing
|
|
|
|
Inherited from platform DS and Tailwind utilities. Consistent `space-y-6` page rhythm, `rounded-2xl` cards, `p-4 lg:p-6` main padding.
|
|
|
|
## Icons
|
|
|
|
Lucide React — consistent with other TorbatYar modules.
|
|
|
|
## Accessibility
|
|
|
|
- `aria-label` on mobile menu and close buttons
|
|
- Keyboard: Escape closes dialogs/drawers (DS default)
|
|
- RTL-first breadcrumb and table alignment
|
|
|
|
## Dark mode
|
|
|
|
Supported via `ColorModeProvider` toggle in portal shell; all surfaces use CSS variables.
|
|
|
|
## Future: shared/maps
|
|
|
|
When `frontend/shared/maps/` is populated, Delivery map pages should import shared map components rather than extending `DeliveryMapPlaceholder`.
|