Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
PlanTempusApp/PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
Janus C. H. Knudsen 15579acba8 Various CSS work
2026-01-12 22:10:57 +01:00

7.1 KiB
Raw Blame History

SWP Design System - Component Catalog

Reference for alle genbrugelige komponenter. LAV ALDRIG EN NY KOMPONENT HVIS DEN ALLEREDE EKSISTERER HER.

Page Structure (page.css)

Element Beskrivelse Eksempel
swp-page-container Hovedcontainer for side <swp-page-container>...</swp-page-container>
swp-page-header Side header med titel og actions Flex, space-between
swp-page-title Titel-wrapper med h1 og p h1 + subtitle
swp-page-actions Action buttons i header Flex gap
swp-card Standard card wrapper Border, padding, rounded
swp-card-header Card header Flex, title + action
swp-card-title Card titel med ikon <swp-card-title><i>...</i> Text</swp-card-title>
swp-card-content Card indhold Block

Stats Components (stats.css)

Containers

Element Kolonner Brug
swp-stats-bar 4 kolonner Dashboard stats
swp-stats-grid 4 kolonner Grid layout
swp-stats-row 3 kolonner Feature pages (Employees, etc.)

Stat Card

<swp-stat-card class="[variant]">
    <swp-stat-value>42</swp-stat-value>
    <swp-stat-label>Aktive brugere</swp-stat-label>
</swp-stat-card>

Varianter (class):

  • highlight / teal - Teal farve
  • success - Grøn
  • warning / amber - Amber/orange
  • danger / negative / red - Rød
  • purple - Lilla
  • highlight filled - Filled teal baggrund

VIGTIGT: swp-stat-value bruger font-family: var(--font-mono) automatisk!

Tabs (tabs.css)

<swp-tab-bar>
    <swp-tab class="active" data-tab="users">
        <i class="ph ph-users"></i>
        <span>Brugere</span>
    </swp-tab>
    <swp-tab data-tab="roles">
        <i class="ph ph-shield-check"></i>
        <span>Roller</span>
    </swp-tab>
</swp-tab-bar>

<swp-tab-content data-tab="users" class="active">
    <!-- Content -->
</swp-tab-content>

<swp-tab-content data-tab="roles">
    <!-- Content -->
</swp-tab-content>

VIGTIGT:

  • Aktiv tab: class="active" (IKKE data-active="true")
  • Tab content: class="active" for at vise

Buttons (cash.css)

<swp-btn class="primary">
    <i class="ph ph-plus"></i>
    Tilføj
</swp-btn>

Varianter:

  • primary - Teal baggrund, hvid tekst
  • secondary - Hvid baggrund, border
  • ghost - Transparent

Badges (cash.css)

ALLE badges bruger swp-status-badge - kun farve og indhold ændres.

<swp-status-badge class="[variant]">Tekst</swp-status-badge>

Varianter:

Class Farve Brug
approved Grøn Godkendt status
active Grøn Aktiv status
draft Amber Kladde status
invited Amber Invitation sendt
owner Teal Ejer rolle
admin Purple Admin rolle
leader Blue Leder rolle
employee Grå Medarbejder rolle

Automatisk dot via ::before pseudo-element.

Tables - Grid + Subgrid Pattern

Struktur (ALTID følg dette mønster)

<swp-[feature]-table>
    <swp-[feature]-table-header>
        <swp-[feature]-cell>Kolonne 1</swp-[feature]-cell>
        <swp-[feature]-cell>Kolonne 2</swp-[feature]-cell>
    </swp-[feature]-table-header>
    <swp-[feature]-table-body>
        <swp-[feature]-row>
            <swp-[feature]-cell>Data 1</swp-[feature]-cell>
            <swp-[feature]-cell>Data 2</swp-[feature]-cell>
        </swp-[feature]-row>
    </swp-[feature]-table-body>
</swp-[feature]-table>

CSS Pattern

swp-[feature]-table {
  display: grid;
  grid-template-columns: /* definer kolonner her */;
}

swp-[feature]-table-header,
swp-[feature]-table-body {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

swp-[feature]-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

Eksisterende tabeller

Feature Container Row CSS fil
Cash swp-cash-table swp-cash-table-row cash.css
Employees swp-employee-table swp-employee-row employees.css
Bookings swp-booking-list swp-booking-item bookings.css
Notifications swp-notification-list swp-notification-item notifications.css
Attentions swp-attention-list swp-attention-item attentions.css

Table Cells - Standard Styling

/* Header cells */
swp-[feature]-table-header swp-[feature]-cell {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
}

/* Body cells */
swp-[feature]-cell {
  padding: var(--spacing-5);
  font-size: var(--font-size-base);  /* ALTID base, ikke sm */
  color: var(--color-text);
}

Icon Buttons (employees.css)

<swp-table-actions>
    <swp-icon-btn title="Rediger">
        <i class="ph ph-pencil"></i>
    </swp-icon-btn>
    <swp-icon-btn class="danger" title="Slet">
        <i class="ph ph-trash"></i>
    </swp-icon-btn>
</swp-table-actions>

User Info Pattern (employees.css)

<swp-user-info>
    <swp-user-avatar class="[color]">MJ</swp-user-avatar>
    <swp-user-details>
        <swp-user-name>Maria Jensen</swp-user-name>
        <swp-user-email>maria@example.com</swp-user-email>
    </swp-user-details>
</swp-user-info>

Avatar farver: (ingen class = teal), purple, blue, amber

Design Tokens (design-tokens.css)

Farver

Token Brug
--color-teal Primary brand, success
--color-green Success, positive
--color-amber Warning, pending
--color-red Error, danger
--color-purple Special, AI
--color-blue Info

Spacing

--spacing-1: 2px;
--spacing-2: 4px;
--spacing-3: 6px;
--spacing-4: 8px;
--spacing-5: 10px;
--spacing-6: 12px;
--spacing-7: 14px;
--spacing-8: 16px;
--spacing-10: 20px;
--spacing-12: 24px;

Font Sizes

--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-md: 13px;
--font-size-base: 14px;  /* Standard body text */
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 20px;
--font-size-3xl: 22px;

Font Families

--font-family: 'Poppins', sans-serif;
--font-mono: 'JetBrains Mono', monospace;  /* Til tal/værdier */

Checklist for Ny Side

  1. Læs denne fil
  2. List UI elementer der skal bruges
  3. Match hver element med eksisterende komponent
  4. Dokumenter kun NYE elementer der skal oprettes
  5. Opret feature CSS med header der angiver genbrugte komponenter
  6. Brug var(--font-size-base) for body text
  7. Brug var(--font-mono) kun for tal/værdier

Fil Reference

Fil Indhold
design-tokens.css Farver, spacing, fonts, shadows
design-system.css Base resets, typography
page.css Page structure, cards
stats.css Stat cards, stat rows
tabs.css Tab bar, tab content
cash.css Buttons, status badges, tables
employees.css User info, role badges, employee table
bookings.css Booking list items
notifications.css Notification items
attentions.css Attention items