# 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`.