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>
1.7 KiB
1.7 KiB
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.