TorbatYar/frontend/docs/hospitality-design-guidelines.md
Mortezakoohjani 065c053c16 Add complete Torbat Food hospitality frontend connected to backend APIs.
Introduces modules/hospitality with 54 routes, BFF proxy, capability-gated nav, CRUD factory, and architecture validation docs.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-26 20:54:26 +03:30

67 lines
1.6 KiB
Markdown

# Hospitality Design Guidelines
## Color & theme
Use CSS variables from `globals.css`:
```css
--hospitality-accent: #ea580c; /* light */
--hospitality-accent-soft: rgba(234, 88, 12, 0.12);
--hospitality-warm: #f97316;
```
Dark mode equivalents use `#fb923c` accent.
**Do not** hardcode hex in components — reference `var(--hospitality-accent)`.
## Typography
- Headings: inherit global `text-secondary`, semibold
- Muted text: `text-[var(--muted)]`
- Monospace for codes/tokens: `font-mono text-sm`
## Spacing
- Page padding: `p-4 lg:p-6`
- Card gaps: `gap-4`
- Form fields: `space-y-3`
- Nav items: `py-2.5 px-3`, rounded-xl
## Components
| Pattern | Guideline |
|---------|-----------|
| Primary action | `Button` default variant, hospitality accent via active nav |
| Destructive | `ConfirmDialog` with `danger` |
| Status | `HospitalityStatusChip` or `Badge` tones |
| Tables | Always wrap with search in `HospitalityTablePage` |
| Empty states | Action button when create is available |
## Navigation
- Groups collapse on mobile drawer
- Hide nav items when capability flag is `false`
- Hub link at sidebar footer
## Forms
- react-hook-form + zod validation
- Required fields marked in schema messages (Persian)
- Select for enums; Input for text/number
## Icons
Lucide icons in nav config (`constants/portals.ts`).
## Motion
- Sidebar chevron: `transition-transform`
- Nav hover: `transition-colors duration-200`
- Avoid heavy animations on data tables
## RTL
- Search icon: `right-3`, input `pr-10`
- Sidebar border: `border-l` (RTL shell)
- Breadcrumb chevron rotated for RTL flow