7c929eb4dc
- Streamlined the README.md for clarity and conciseness. - Deleted outdated documentation files related to Freebit SIM management, SIM management API data flow, and various architectural guides to reduce clutter and improve maintainability. - Updated the last modified date in the README to reflect the latest changes.
37 lines
1.7 KiB
Markdown
37 lines
1.7 KiB
Markdown
## Portal UI Design System (Frontend)
|
||
|
||
This project uses **Tailwind CSS v4** with a **token-based theme** so pages look cohesive and remain easy to maintain.
|
||
|
||
### Principles
|
||
|
||
- **Use semantic tokens** instead of raw colors (`bg-card`, `text-foreground`, `border-border`, `text-muted-foreground`, `ring-ring`).
|
||
- **Use shared shells and templates**:
|
||
- Public pages: `PublicShell` via `apps/portal/src/app/(public)/layout.tsx`
|
||
- Authenticated pages: `AppShell` via `apps/portal/src/app/(authenticated)/layout.tsx`
|
||
- Authenticated page content: `PageLayout` for titles/breadcrumbs/loading/error
|
||
- **Prefer shared primitives** (`Button`, `AlertBanner`, `ErrorState`, `Loading*`, `SubCard`) over ad-hoc markup.
|
||
- **Keep motion subtle** (shadow/color transitions; avoid big gradients/translate/scale).
|
||
|
||
### Quick reference: what to use
|
||
|
||
- **Page wrapper**: `PageLayout`
|
||
- Use `loading`, `error`, `onRetry`, and `breadcrumbs` for consistent states.
|
||
- **Surfaces**
|
||
- Use `bg-card border-border shadow-[var(--cp-shadow-1)]` for panels.
|
||
- Use `.cp-card` for simple card surfaces when you don’t need a component.
|
||
- **Typography**
|
||
- Titles: `text-foreground`
|
||
- Secondary text: `text-muted-foreground`
|
||
- **Inputs**
|
||
- Use `Input` / `FormField` to get correct borders/focus/invalid states.
|
||
- **Buttons**
|
||
- Use `Button` variants (`default`, `outline`, `secondary`, `ghost`, `link`).
|
||
- **Status/feedback**
|
||
- Use `AlertBanner` (`success|info|warning|error`) and `StatusPill`.
|
||
|
||
### Token sources
|
||
|
||
- Global semantic colors: `apps/portal/src/app/globals.css`
|
||
- Portal-specific tokens/spacing/shadows: `apps/portal/src/styles/tokens.css`
|
||
- Semantic utility classes: `apps/portal/src/styles/utilities.css`
|