Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Calendar/docs/design-system.md
Janus C. H. Knudsen fac7754d7a Refactors design system documentation and layout 
Updates design system documentation with comprehensive component overview
Enhances UI layout across multiple pages with consistent styling and new components
Adds support for charts, pagination, and responsive design elements

Improves overall system documentation and visual consistency
2026-01-07 22:12:25 +01:00

5.7 KiB
Raw Permalink Blame History

SWP Design System - UI/UX Dokumentation

Oversigt

Dette dokument beskriver det komponent-baserede design system udviklet til Salon OS SaaS platformen gennem POC-udvikling. Systemet består af 150+ custom HTML elementer med swp- prefix.

Design Principper

  • Custom Elements: Alle komponenter bruger semantiske swp-* tags
  • CSS Variables: Theming via --color-* variabler (light/dark mode)
  • Responsive: Mobile-first med grid breakpoints
  • Konsistent spacing: 4px base unit (4, 8, 12, 16, 20, 24px)

Farvepalette (CSS Variables)

--color-surface: #fff / #1e1e1e
--color-background: #f5f5f5 / #121212
--color-border: #e0e0e0 / #333
--color-text: #333 / #e0e0e0
--color-text-secondary: #666 / #999
--color-teal: #00897b (primary)
--color-blue: #1976d2
--color-green: #43a047 (success)
--color-amber: #f59e0b (warning)
--color-red: #e53935 (error)
--color-purple: #8b5cf6

Typografi

--font-family: 'Poppins', sans-serif
--font-mono: 'JetBrains Mono', monospace
Størrelse Brug
22px Stat values
16px Page titles
14px Body text
13px Table cells, inputs
12px Labels, hints
11px Table headers (uppercase)

Komponent-katalog

1. Layout & Container

Element Beskrivelse
swp-page Hovedpage wrapper
swp-page-container Max-width container (1400px)
swp-card Kortkomponent med border og shadow
swp-card-header Kortheader med titel
swp-drawer Slide-in panel fra højre
swp-drawer-overlay Mørk overlay bag drawer
swp-two-columns To-kolonne layout

2. Navigation

Element Beskrivelse
swp-topbar Sticky header bar
swp-topbar-left/right Flex containers i topbar
swp-page-title Sidetitel i topbar
swp-back-link Tilbage-navigation med ikon
swp-tabs Tab navigation
swp-tab Enkelt tab

3. Formularer

Element Beskrivelse
swp-form-field Wrapper for label + input
swp-form-label Form label
swp-form-input Input wrapper
swp-form-row Horisontal gruppe af felter
swp-form-hint Hjælpetekst under felt
swp-toggle-slider On/off toggle
swp-edit-section Redigerbar sektion
swp-edit-row Label + værdi row

4. Tabeller

Element Beskrivelse
swp-table Hovedtabel container
swp-table-header Header row (grid)
swp-table-body Body container
swp-table-row Data row (grid)
swp-th Header cell
swp-td Data cell
swp-table-footer Footer med pagination
swp-row-arrow Klik-indikator pil

5. Statistik

Element Beskrivelse
swp-stats-bar Grid af stat cards
swp-stat-card Enkelt statistik kort
swp-stat-value Stor tal (mono font)
swp-stat-label Beskrivelse under tal
swp-stat-change Ændring indikator (+/-)

6. Søgning & Filtrering

Element Beskrivelse
swp-filter-bar Filterpanel
swp-search-input Søgefelt med ikon
swp-filter-group Label + select/input
swp-filter-label Filter label

7. Badges & Status

Element Beskrivelse Klasser
swp-status-badge Status indikator .paid, .pending, .credited
swp-payment-badge Betalingsmetode .card, .cash, .mobilepay
swp-tag Inline tag .vip, .new

8. Buttons

Element Beskrivelse Klasser
swp-btn Standard button .primary, .secondary, .danger

9. Charts (swp-charting)

Element Beskrivelse
swp-chart-card Chart wrapper kort
swp-chart-header Titel + hint
swp-chart-container Canvas container

10. Specialiserede Komponenter

Kunde

  • swp-customer-avatar - Rund avatar
  • swp-customer-cell - Navn + telefon
  • swp-customer-header - Profil header

Medarbejder

  • swp-employee-avatar - Medarbejder billede
  • swp-employee-name - Navn display

Faktura

  • swp-invoice-cell - Fakturanummer
  • swp-datetime-cell - Dato + tid
  • swp-amount-cell - Beløb (højre-justeret)

Produkt

  • swp-variants-table - Variant liste
  • swp-stock-display - Lagerstatus
  • swp-margin-display - Avance visning

Booking/AI

  • swp-gap-card - Ledigt hul kort
  • swp-suggestion-item - AI forslag
  • swp-optimization-score - Score cirkel

Pagination

<swp-pagination>
  <swp-page-btn><i class="ph ph-caret-left"></i></swp-page-btn>
  <swp-page-btn class="active">1</swp-page-btn>
  <swp-page-btn>2</swp-page-btn>
  <swp-page-btn>...</swp-page-btn>
  <swp-page-btn><i class="ph ph-caret-right"></i></swp-page-btn>
</swp-pagination>

Ikoner

Bruger Phosphor Icons via CDN:

<script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
<i class="ph ph-magnifying-glass"></i>
<i class="ph ph-caret-right"></i>
<i class="ph ph-credit-card"></i>

POC Filer (Reference)

Fil Domæne
poc-salg.html Salgsoversigt, fakturaer
poc-customer-list.html Kundeliste
poc-customer-detail.html Kundeprofil
poc-employee.html Medarbejderprofil
poc-produkt.html Produktdetaljer
poc-gavekort.html Fordelskort
poc-kasseafstemninger.html Kasseafstemning
poc-rapport.html Rapporter
poc-indstillinger.html Indstillinger

Næste Skridt: .NET Core Implementation

Når design systemet er dokumenteret, er næste fase at implementere:

  1. Backend API endpoints
  2. Database modeller
  3. Razor/Blazor komponenter baseret på swp-* elementer