ankhbayar/Assist_Design
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity
Assist_Design/docs/development/portal/ui-design-system.md
barsa 7c929eb4dc Update Customer Portal Documentation and Remove Deprecated Files 
- 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.
2025-12-23 15:43:36 +09:00

1.7 KiB
Raw Blame History

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