Introduces modules/hospitality with 54 routes, BFF proxy, capability-gated nav, CRUD factory, and architecture validation docs. Co-authored-by: Cursor <cursoragent@cursor.com>
67 lines
1.6 KiB
Markdown
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
|