Janus C. H. Knudsen 2e6207bb0b Reorganizes and optimizes shared CSS components

Consolidates UI components into a centralized components.css file
Removes duplicate styles across multiple CSS files
Adds utility classes in a new utilities.css file
Reduces overall CSS complexity and improves maintainability

Removes quick-stats.css and redistributes its styles
Updates layout and stylesheet references accordingly

2026-01-13 00:09:46 +01:00

7.7 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-section-label`	Card section label	Uppercase, 11px, border-bottom
`swp-section-header`	Wrapper for label + action	Flex, space-between
`swp-section-action`	Action link i section header	Teal, clickable
`swp-card-content`	Card indhold	Block

Card Header Eksempler

Simpel label (uden action):

<swp-card>
    <swp-section-label>Kontakter</swp-section-label>
    <swp-card-content>...</swp-card-content>
</swp-card>

Label med action:

<swp-card>
    <swp-section-header>
        <swp-section-label>Dagens bookinger</swp-section-label>
        <swp-section-action>Se alle</swp-section-action>
    </swp-section-header>
    <swp-card-content>...</swp-card-content>
</swp-card>

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

Læs denne fil
List UI elementer der skal bruges
Match hver element med eksisterende komponent
Dokumenter kun NYE elementer der skal oprettes
Opret feature CSS med header der angiver genbrugte komponenter
Brug var(--font-size-base) for body text
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

7.7 KiB Raw Blame History