0eec9f729b
Commit completed Torbat Pages admin frontend module, BFF proxy, routes, and validation artifacts for official platform deploy. Co-authored-by: Cursor <cursoragent@cursor.com>
40 lines
1.7 KiB
Markdown
40 lines
1.7 KiB
Markdown
# Experience Design System
|
|
|
|
Independent module: `frontend/modules/experience/design-system/`.
|
|
|
|
## Tokens (`globals.css` + `tokens.ts`)
|
|
|
|
| Token | Light | Dark |
|
|
| --- | --- | --- |
|
|
| `--experience-accent` | `#0891b2` | `#22d3ee` |
|
|
| `--experience-accent-soft` | rgba cyan 12% | rgba cyan 16% |
|
|
| `--experience-success` | `#059669` | `#34d399` |
|
|
| `--experience-warning` | `#d97706` | `#fbbf24` |
|
|
| `--experience-danger` | `#dc2626` | `#f87171` |
|
|
|
|
Use `var(--experience-accent)` — never hardcode hex in feature screens.
|
|
|
|
## Capabilities
|
|
|
|
| Capability | Component / mechanism |
|
|
| --- | --- |
|
|
| Light / Dark | Platform `ColorModeProvider` in PortalShell |
|
|
| Tenant / brand themes | `ExperienceThemeProvider` overrides accent tokens on subtree |
|
|
| Brand tokens | `experienceTokens` + CSS variables |
|
|
| RTL / LTR | `ExperienceThemeProvider` `direction` + `data-experience-dir` |
|
|
| Responsive | Tailwind breakpoints across shell, tables, kanban |
|
|
| WCAG | Chart `role=img`, Map `role=region`, Timeline `<time>`, Kanban list roles; a11y smoke test |
|
|
| Charts | `ExperienceChart` (recharts bar/line) |
|
|
| Maps | `ExperienceMap` lightweight marker shell (no third-party map SDK) |
|
|
| Tables | `ExperienceTablePage` |
|
|
| Timeline | `ExperienceTimeline` |
|
|
| Kanban | `ExperienceKanban` |
|
|
| Empty states | `ExperienceEmptyState` |
|
|
| Skeletons | `ExperienceSkeleton` |
|
|
| Animations | `ExperienceFadeUp` / `ExperienceFadeIn` / `ExperienceStagger` (framer-motion) |
|
|
| Playground | `/experience/design-system` |
|
|
|
|
## Playground
|
|
|
|
Toggle direction (RTL/LTR) and brand accent color. Demo data is local for DS preview only; product screens consume Experience APIs / seed DB.
|