Seiten

Inhalt

@xpulse/theme – Component Spec

Status: CONCEPT · Erstellt März 2026 Übergeordnet: GLOBAL_concept-ecosystem.md Löst auf: COMP_ui_spec.md, COMP_ui_concept.md (Theme-Schicht) Begleitdokument: GLOBAL_concept-brand.md

Übersicht

CSS Design System für alle xPulse Tools – Struktur, Farben, Effekte und Animationen in einem Package. Kein separates @xpulse/theme – alles lebt in @xpulse/theme.

Ein Theme ist eine CSS-Datei die Custom Properties, Komponenten-Styles, Hover/Focus-Effekte und Animationen definiert. Themes werden per Discovery automatisch gefunden – kein manuelles Registrieren.

Was das Package liefert:

CSS Reset + Base
Custom Properties (--xpulse-*)
Komponenten-Klassen (.xpulse-btn-primary, .xpulse-card etc.)
Animationen
Noise-Overlay (Brand-Identität)
Vordefinierte Themes (dark, light)
Theme-Toggle via JS
Discovery: eigene App-Themes werden automatisch gefunden

Custom Properties – Naming Convention

Alle Custom Properties folgen dem --xpulse-* Prefix – eindeutig, kein Konflikt mit anderen Libraries, konsistent mit dem BEM-Gedanken.

1 /* Farben */
2 --xpulse-bg
3 --xpulse-surface
4 --xpulse-surface-strong
5 --xpulse-border
6 --xpulse-muted
7 --xpulse-text
8 --xpulse-text-dim
9 --xpulse-accent
10 --xpulse-accent2
11 --xpulse-accent-soft
12 --xpulse-warning
13 --xpulse-danger
14 --xpulse-shadow
15 --xpulse-input-bg
16  
17 /* Typografie */
18 --xpulse-font-mono
19 --xpulse-font-serif
20 --xpulse-font-size-body
21 --xpulse-font-size-display
22 --xpulse-font-size-h2
23 --xpulse-font-size-h3
24 --xpulse-font-size-lead
25 --xpulse-font-size-meta
26  
27 /* Effekte */
28 --xpulse-transition
29 --xpulse-radius
30 --xpulse-hover-opacity
31  
32 /* Buttons */
33 --xpulse-button-text
34 --xpulse-button-radius
35 --xpulse-button-font-size
36 --xpulse-button-min-height
37 --xpulse-button-padding-y
38 --xpulse-button-padding-x
39 /* …sowie Größenvarianten: xs, sm, md, lg */
40 --xpulse-button-hover-opacity
41 --xpulse-button-active-scale

Themes

dark.css – Standard xPulse Theme

Datei: public/css/themes/dark.css

CSS-Selektor: html[data-theme="dark"] (plus :root als Default-Fallback).

Auszug der wichtigsten Tokens:

1 :root,
2 html[data-theme="dark"] {
3     --xpulse-bg:             #0d0d0d;
4     --xpulse-surface:        #141414;
5     --xpulse-surface-strong: #1b1b1b;
6     --xpulse-text:           #c8c8c8;
7     --xpulse-text-dim:       #555;
8     --xpulse-border:         #222;
9     --xpulse-muted:          #444;
10     --xpulse-accent:         #8703b0;
11     --xpulse-accent2:        #7eb8a4;
12     --xpulse-accent-soft:    rgba(135, 3, 176, 0.18);
13     --xpulse-warning:        #b89a3e;
14     --xpulse-danger:         #c0606a;
15     --xpulse-shadow:         0 4px 24px rgba(0, 0, 0, 0.5);
16     --xpulse-input-bg:       #141414;
17     /* …Font-Size-Tokens, Button-Tokens etc. */
18 }
19  
20 /* System-Preference-Fallback falls noch kein data-theme gesetzt */
21 @media (prefers-color-scheme: dark) {
22     html:not([data-theme]) { ... }
23 }

light.css – Helles Theme

Analog zu dark.css, Selektor html[data-theme="light"].

App-Theme-Erweiterung

Eine App legt eigene CSS-Overrides unter src/themes/ ab:

1 /* src/themes/app.css */
2 .xpulse-shell {
3     width: min(1100px, calc(100% - 32px));
4     margin: 32px auto;
5 }

app.css wird zusätzlich zum Theme-Bundle als separater Link eingebunden – sie ersetzt das Basis-Theme nicht, sondern ergänzt es.

CSS-Bundle und Discovery

Alle CSS-Dateien werden beim init() zu einem einzigen Bundle zusammengefasst und über eine einzelne Route ausgeliefert:

1 GET /_theme/css/xpulse.css    ← minifiziertes All-in-One-Bundle
2 GET /_theme/theme.js          ← optionales Browser-Runtime-Script

Kein separates Laden einzelner Theme-Dateien im Browser – ein Request, ein Bundle.

Aufbaureihenfolge im Bundle

1 1. public/css/base.css                     ← Reset, Body, Noise-Overlay, Animationen
2 2. public/css/components/*.css             ← alle Komponenten (via @import in components.css)
3 3. public/css/themes/*.css                 ← Built-in Theme-Tokens (dark, light)
4 4. src/themes/*.css                        ← App-spezifische Overrides (optional)

Theme-Name-Discovery

Theme-Namen werden aus dem gebündelten CSS per Regex extrahiert – kein Filename-Parsing, kein manuelles Registrieren:

1 [data-theme="dark"]   → 'dark'
2 [data-theme="light"]  → 'light'
3 [data-theme="app"]    → 'app'

Nur Themes die im CSS als Selektor auftauchen, gelten als bekannt.

App-Theme-Overrides

App-CSS unter src/themes/ wird ans Bundle-Ende angehängt. Der app-Theme-Link wird zusätzlich als separater <link> eingebunden (via themeAssets()).

xpulse.json Konfiguration

1 {
2     "theme": {
3         "default": "dark",
4         "allow":   ["dark", "light"],
5         "cache": {
6             "enabled": true,
7             "ttl":     0
8         }
9     }
10 }

Key	Beschreibung	Default
`theme.default`	Aktives Theme beim Start	`"dark"`
`theme.allow`	Welche Themes der User wählen darf. `[]` = alle entdeckten Themes erlaubt	`[]`
`theme.cache.enabled`	CSS-Bundle cachen (siehe Caching-Abschnitt)	`true`
`theme.cache.ttl`	Cache-Ablauf in Sekunden. `0` = kein Ablauf	`0`

Wenn allow leer oder nicht gesetzt – alle entdeckten Themes sind erlaubt. Wenn allow genau ["dark", "light"] enthält – Toggle-Button statt Select. Wenn allow mehr als 2 Themes enthält – Select-Dropdown. Wenn allow nur ein Theme enthält – kein Switcher in der UI.

Component-Default (`@xpulse/theme/xpulse.json`)

1 {
2     "theme": {
3         "default": "dark",
4         "allow":   [],
5         "cache": {
6             "enabled": true,
7             "ttl":     0
8         }
9     }
10 }

Server-API (Node.js)

1 import theme from '@xpulse/theme';
2  
3 // Initialisieren – Bundle bauen, Routes registrieren
4 await theme.init();
5  
6 // Mit Optionen
7 await theme.init({ root: process.cwd(), force: false });
8 // root  → wo nach src/themes/ gesucht wird (default: cwd)
9 // force → Cache ignorieren und Bundle neu bauen
10  
11 // Aktives Default-Theme (aus Config)
12 theme.current();     // → 'dark'
13  
14 // Alle im CSS entdeckten Themes
15 theme.available();   // → ['dark', 'light']
16  
17 // Erlaubte Themes (gefiltert durch theme.allow)
18 theme.allowed();     // → ['dark', 'light']
19  
20 // Existenzprüfung
21 theme.has('dark');   // → true
22  
23 // Theme-Wechsel (Server-seitig)
24 theme.set('light');
25  
26 // Toggle (nur wenn genau 2 Themes in allowed())
27 theme.toggle();
28  
29 // URLs
30 theme.href();        // → '/_theme/css/xpulse.css'
31 theme.scriptHref();  // → '/_theme/theme.js'

Wie der Toggle funktioniert

Theme-Wechsel wird durch data-theme-Attribut auf <html> gesteuert – CSS-Selektoren html[data-theme="dark"] greifen ohne JS-seitiges DOM-Styling. Zur Sicherheit wird zusätzlich die Klasse theme-${name} gesetzt.

1 <html data-theme="dark" class="theme-dark">   ← default
2 <html data-theme="light" class="theme-light"> ← nach toggle

Anti-FOUC: Das von themeAssets() generierte Inline-Script setzt data-theme und die Klasse bereits im <head>, bevor das erste Paint stattfindet.

User-Präferenz wird im Browser in localStorage gespeichert:

1 // localStorage Key: xpulse_theme
2 'dark' | 'light' | ...

Gefeuerte Events

Lifecycle

Event	Payload	Wann
`themes:load:start`	—	Bundle-Build beginnt
`theme:basics:loaded`	—	`base.css` geladen
`theme:components:loaded`	—	Alle Component-CSS geladen
`theme:loaded`	`{ name }`	Einzelnes Theme-CSS geladen
`themes:concatenated`	—	Alle Parts zusammengefügt
`themes:minified`	—	Bundle minifiziert
`themes:cached`	`{ path }`	Bundle auf Disk geschrieben
`themes:load:end`	—	Bundle-Build abgeschlossen
`theme:ready`	`{ theme, available }`	`init()` vollständig

Cache

Event	Payload	Wann
`themes:cache:hit`	`{ path }`	Gültiger Cache-File gefunden
`themes:cache:miss`	—	Kein Cache, Bundle wird neu gebaut
`themes:cache:loaded`	`{ serveCount }`	Bundle-Request bedient

Laufzeit

Event	Payload	Wann
`theme:changed`	`{ from, to }`	nach `theme.set()` / `theme.toggle()`
`theme:warning`	`{ type, … }`	Ungültiges Theme, Toggle nicht möglich etc.
`theme:error`	`{ type }`	Keine Themes im Bundle gefunden

Caching

Das CSS-Bundle wird beim ersten init() auf Disk geschrieben und bei Folge-Starts direkt von dort gelesen – kein erneutes Lesen + Minifizieren.

1 var/cache/theme/xpulse.css

Verhalten nach Umgebung

Situation	Verhalten
`NODE_ENV !== 'production'` (Dev-Mode)	Cache immer übersprungen, Bundle wird neu gebaut
Production, Cache-File vorhanden	Cache wird geladen (Event: `themes:cache:hit`)
Production, kein Cache-File	Bundle wird gebaut und gecacht (Event: `themes:cache:miss`)
`init({ force: true })`	Cache wird ignoriert, Bundle neu gebaut
`theme.cache.ttl > 0`	Cache-File zu alt → wird neu gebaut

Konfiguration

1 {
2   "theme": {
3     "cache": {
4       "enabled": true,
5       "ttl":     0
6     }
7   }
8 }

ttl: 0 bedeutet kein Ablauf – Cache bleibt bis zum nächsten manuellen Build oder force: true.

CSS Reset + Base

Aus pwa/public/css/base.css extrahiert – vollständig generisch:

1 /* Reset */
2 *, *::before, *::after { box-sizing: border-box; }
3 * { margin: 0; padding: 0; }
4  
5 /* Base */
6 body {
7     background:  var(--xpulse-bg);
8     color:       var(--xpulse-text);
9     font-family: var(--xpulse-font-mono);
10     font-size:   13px;
11     line-height: 1.7;
12 }

Noise-Overlay

Der charakteristische Brand-Effekt – gehört zu jedem xPulse Tool:

1 body::before {
2     content: '';
3     position: fixed;
4     inset: 0;
5     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
6     pointer-events: none;
7     z-index: 9999;
8     opacity: 0.4;
9 }

Im light Theme deaktiviert:

1 html.theme-light body::before { display: none; }

Animationen

1 @keyframes xpulse-fadeIn      /* opacity 0→1 + translateY 8px→0 */
2 @keyframes xpulse-msgIn       /* opacity 0→1 + translateY 4px→0 (subtiler) */
3 @keyframes xpulse-pulse-dim   /* opacity 0.4↔1, wartende States */
4 @keyframes xpulse-dots        /* '' → '.' → '..' → '...' Lade-Indikator */
5 @keyframes xpulse-shake       /* horizontal shake für Fehler-Feedback */
6 @keyframes xpulse-spin        /* 360° rotate für Spinner */
7 @keyframes xpulse-typingBounce /* Typing-Indikator Punkte */

Utility-Klassen:

1 .xpulse-fade-in  { animation: xpulse-fadeIn 0.3s ease both; }
2 .xpulse-spin     { animation: xpulse-spin 1s linear infinite; }

Komponenten-Klassen

Alle Klassen folgen dem .xpulse-* Prefix – konsistent mit den Custom Properties.

Typografie

1 .xpulse-h1        /* Heading 1 – Fraunces, groß, accent */
2 .xpulse-h2        /* Heading 2 */
3 .xpulse-h3        /* Heading 3 */
4 .xpulse-label     /* Uppercase Label – Mono, klein, letter-spacing */
5 .xpulse-text      /* Fließtext – Mono, 13px, line-height 1.6 */
6 .xpulse-text-sm   /* Kleiner Text – 11px */
7 .xpulse-code      /* Code-Block – Mono, Surface-BG, Border */
8 .xpulse-code-inline /* Inline Code */

Layout

1 .xpulse-container  /* max-width, padding, centered */
2 .xpulse-stack      /* flex-column mit gap */
3 .xpulse-row        /* flex-row mit gap */
4 .xpulse-divider    /* <hr> Equivalent */

Buttons

1 .xpulse-btn-primary    /* Accent-BG, uppercase, volle Breite */
2 .xpulse-btn-secondary  /* Border-only, hover → accent */
3 .xpulse-btn-danger     /* Border danger, hover → filled */
4 .xpulse-btn-icon       /* Icon-only, kein Border */

Inputs & Fields

1 .xpulse-input          /* Text/Password Input – styled, focus → accent border */
2 .xpulse-field          /* Container mit gap */
3 .xpulse-field-label    /* uppercase, klein */
4 .xpulse-field-hint     /* dim, klein */

Cards & Elemente

1 .xpulse-card           /* Surface-Box mit Border, Padding, Border-Radius */
2 .xpulse-badge          /* Kleines Label-Element */
3 .xpulse-tag            /* Tag/Pill */
4 .xpulse-table          /* Tabelle mit korrektem Spacing */

1 .xpulse-menu-btn       /* Menü-Auslöser Button */
2 .xpulse-dropdown       /* Dropdown-Container */

Sonstige

1 .xpulse-spinner        /* inline Lade-Spinner */

Chat-spezifisch (bleibt in xpulse-chat)

Folgende Klassen und Properties gehören nicht ins Package – sie sind spezifisch für die Chat-App und bleiben in deren lokalem CSS:

1 /* Properties */
2 --xpulse-sidebar-width
3 --xpulse-topbar-height
4  
5 /* Klassen */
6 .xpulse-status-dot       /* Chat Peer-Status */
7 .xpulse-status-badge     /* Chat Peer-Status Badge */
8 .xpulse-waiting-dots     /* Chat Typing-Indikator */

Verwendung

1 <!-- Empfohlen: Template-Method nutzen -->
2 {% themeAssets() %}
3 {% themeSwitcher() %}

themeAssets() rendert:

<link> auf das CSS-Bundle /_theme/css/xpulse.css
Optional: <link> auf /_theme/app.css falls ein App-Theme vorhanden
Inline Anti-FOUC-Script (setzt data-theme + Klasse sofort im <head>)
<script defer src="/_theme/theme.js"> für den Browser-Toggle

1 // Server: Theme-System initialisieren
2 import theme from '@xpulse/theme';
3 await theme.init();

Paket-Struktur

1 @xpulse/theme/
2   src/
3     index.js                        ← Server-API: init, set, toggle, current, available, has, href, scriptHref
4     template-methods/
5       theme-assets.js               ← themeAssets() Template-Method
6       theme-switcher.js             ← themeSwitcher() Template-Method
7       theme-token-editor.js         ← themeTokenEditor() Template-Method
8   public/
9     css/
10       base.css                      ← Reset, Body-Styles, Noise-Overlay, Animationen
11       components.css                ← @import-Liste aller Komponenten
12       components/
13         boxes.css
14         brand.css
15         buttons.css
16         cards.css
17         forms.css
18         navigation.css
19         …
20       themes/
21         dark.css                    ← Built-in Dark Theme
22         light.css                   ← Built-in Light Theme
23     js/
24       theme.js                      ← Browser-Runtime: Toggle, Token-Editor
25   docs/
26     de/
27       index.md
28       guide.md
29       api.md
30       styleguide/
31     en/
32       …
33   README.md
34   package.json
35   xpulse.json

Dependencies

1 @xpulse/theme
2   └── @xpulse/event    ← theme:ready, theme:changed feuern

Migration von bisherigen CSS Custom Properties

Bestehende xPulse-Projekte nutzen noch die alten unprefix-ten Properties. Migration bei v1.4.0 (Component Based):

Alt	Neu
`--bg`	`--xpulse-bg`
`--surface`	`--xpulse-surface`
`--border`	`--xpulse-border`
`--muted`	`--xpulse-muted`
`--text`	`--xpulse-text`
`--text-dim`	`--xpulse-text-dim`
`--accent`	`--xpulse-accent`
`--accent2`	`--xpulse-accent2`
`--danger`	`--xpulse-danger`
`--mono`	`--xpulse-font-mono`
`--serif`	`--xpulse-font-serif`
`.btn-primary`	`.xpulse-btn-primary`
`.btn-secondary`	`.xpulse-btn-secondary`
`.btn-danger`	`.xpulse-btn-danger`
`.btn-icon`	`.xpulse-btn-icon`
`.field`	`.xpulse-field`
`.field-label`	`.xpulse-field-label`
`.field-hint`	`.xpulse-field-hint`
`@keyframes fadeIn`	`@keyframes xpulse-fadeIn`
`@keyframes spin`	`@keyframes xpulse-spin`

Chat-spezifische Properties (--sidebar-width, --topbar-height) und Klassen (.status-dot, .status-badge, .waiting-dots) bleiben im Chat-CSS ohne Umbenennung.

Dokumentation

Die Komponentendokumentation wird als eigenständige HTML-Seite gerendert – analog zu Bootstrap/Tailwind: live Vorschau + Code-Snippet nebeneinander.

1 xpulse.one/doc/component/theme/

Aufbau:

Jede Komponente hat einen Block mit:
- Rendered Preview (echtes HTML mit aktivem Theme)
- Code-Snippet (copy-pasteable)
- Varianten (z.B. alle Button-Typen)
Theme-Toggle direkt in der Doku sichtbar – dark/light live umschalten
Custom Properties Übersicht als Tabelle mit Live-Farbvorschau
Animationen als Live-Demo

Das Docs-HTML lebt in docs/de/components.html + docs/en/components.html als eigenständige HTML-Docs – rendered direkt im Docs-Bereich von xpulse.one via <iframe> oder inline eingebettet (siehe GLOBAL_concept-docs.md).

Consumer

Projekt	Status	Anmerkung
`chat.xpulse.one`	✅ Quelle	Migration bei v1.4.0
`xpulse.one`	🔜 Erster Smoke Test	Entscheidet ob Package wirklich generisch ist
`board.xpulse.one`	💡 Geplant	Startet nach Smoke Test

Zukunft: ui.xpulse.one

Visueller Theme Generator – eigenes xPulse Tool, eigenständige Subdomain:

Live-Vorschau aller Komponenten mit aktivem Theme
Colorpicker + Slider für alle --xpulse-* Properties
Dark/Light Basis wählbar
Export als fertiges mytheme.css
Direkt einbindbar via Discovery in jedem xPart

1 xpulse.one/doc/component/theme/   ← Dokumentation + Live Preview
2 ui.xpulse.one                     ← Theme Generator + Export

Status: Idee – nach board.xpulse.one denkbar.

1	/* Farben */
2	--xpulse-bg
3	--xpulse-surface
4	--xpulse-surface-strong
5	--xpulse-border
6	--xpulse-muted
7	--xpulse-text
8	--xpulse-text-dim
9	--xpulse-accent
10	--xpulse-accent2
11	--xpulse-accent-soft
12	--xpulse-warning
13	--xpulse-danger
14	--xpulse-shadow
15	--xpulse-input-bg
16
17	/* Typografie */
18	--xpulse-font-mono
19	--xpulse-font-serif
20	--xpulse-font-size-body
21	--xpulse-font-size-display
22	--xpulse-font-size-h2
23	--xpulse-font-size-h3
24	--xpulse-font-size-lead
25	--xpulse-font-size-meta
26
27	/* Effekte */
28	--xpulse-transition
29	--xpulse-radius
30	--xpulse-hover-opacity
31
32	/* Buttons */
33	--xpulse-button-text
34	--xpulse-button-radius
35	--xpulse-button-font-size
36	--xpulse-button-min-height
37	--xpulse-button-padding-y
38	--xpulse-button-padding-x
39	/* …sowie Größenvarianten: xs, sm, md, lg */
40	--xpulse-button-hover-opacity
41	--xpulse-button-active-scale

1	:root,
2	html[data-theme="dark"] {
3	--xpulse-bg: #0d0d0d;
4	--xpulse-surface: #141414;
5	--xpulse-surface-strong: #1b1b1b;
6	--xpulse-text: #c8c8c8;
7	--xpulse-text-dim: #555;
8	--xpulse-border: #222;
9	--xpulse-muted: #444;
10	--xpulse-accent: #8703b0;
11	--xpulse-accent2: #7eb8a4;
12	--xpulse-accent-soft: rgba(135, 3, 176, 0.18);
13	--xpulse-warning: #b89a3e;
14	--xpulse-danger: #c0606a;
15	--xpulse-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
16	--xpulse-input-bg: #141414;
17	/* …Font-Size-Tokens, Button-Tokens etc. */
18	}
19
20	/* System-Preference-Fallback falls noch kein data-theme gesetzt */
21	@media (prefers-color-scheme: dark) {
22	html:not([data-theme]) { ... }
23	}

1	/* src/themes/app.css */
2	.xpulse-shell {
3	width: min(1100px, calc(100% - 32px));
4	margin: 32px auto;
5	}

1	GET /_theme/css/xpulse.css ← minifiziertes All-in-One-Bundle
2	GET /_theme/theme.js ← optionales Browser-Runtime-Script

1	1. public/css/base.css ← Reset, Body, Noise-Overlay, Animationen
2	2. public/css/components/*.css ← alle Komponenten (via @import in components.css)
3	3. public/css/themes/*.css ← Built-in Theme-Tokens (dark, light)
4	4. src/themes/*.css ← App-spezifische Overrides (optional)

1	[data-theme="dark"] → 'dark'
2	[data-theme="light"] → 'light'
3	[data-theme="app"] → 'app'

1	{
2	"theme": {
3	"default": "dark",
4	"allow": ["dark", "light"],
5	"cache": {
6	"enabled": true,
7	"ttl": 0
8	}
9	}
10	}

1	{
2	"theme": {
3	"default": "dark",
4	"allow": [],
5	"cache": {
6	"enabled": true,
7	"ttl": 0
8	}
9	}
10	}

1	import theme from '@xpulse/theme';
2
3	// Initialisieren – Bundle bauen, Routes registrieren
4	await theme.init();
5
6	// Mit Optionen
7	await theme.init({ root: process.cwd(), force: false });
8	// root → wo nach src/themes/ gesucht wird (default: cwd)
9	// force → Cache ignorieren und Bundle neu bauen
10
11	// Aktives Default-Theme (aus Config)
12	theme.current(); // → 'dark'
13
14	// Alle im CSS entdeckten Themes
15	theme.available(); // → ['dark', 'light']
16
17	// Erlaubte Themes (gefiltert durch theme.allow)
18	theme.allowed(); // → ['dark', 'light']
19
20	// Existenzprüfung
21	theme.has('dark'); // → true
22
23	// Theme-Wechsel (Server-seitig)
24	theme.set('light');
25
26	// Toggle (nur wenn genau 2 Themes in allowed())
27	theme.toggle();
28
29	// URLs
30	theme.href(); // → '/_theme/css/xpulse.css'
31	theme.scriptHref(); // → '/_theme/theme.js'

1	<html data-theme="dark" class="theme-dark"> ← default
2	<html data-theme="light" class="theme-light"> ← nach toggle

1	/* Reset */
2	, ::before, *::after { box-sizing: border-box; }
3	* { margin: 0; padding: 0; }
4
5	/* Base */
6	body {
7	background: var(--xpulse-bg);
8	color: var(--xpulse-text);
9	font-family: var(--xpulse-font-mono);
10	font-size: 13px;
11	line-height: 1.7;
12	}

1	body::before {
2	content: '';
3	position: fixed;
4	inset: 0;
5	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
6	pointer-events: none;
7	z-index: 9999;
8	opacity: 0.4;
9	}

1	@keyframes xpulse-fadeIn /* opacity 0→1 + translateY 8px→0 */
2	@keyframes xpulse-msgIn /* opacity 0→1 + translateY 4px→0 (subtiler) */
3	@keyframes xpulse-pulse-dim /* opacity 0.4↔1, wartende States */
4	@keyframes xpulse-dots /* '' → '.' → '..' → '...' Lade-Indikator */
5	@keyframes xpulse-shake /* horizontal shake für Fehler-Feedback */
6	@keyframes xpulse-spin /* 360° rotate für Spinner */
7	@keyframes xpulse-typingBounce /* Typing-Indikator Punkte */

1	.xpulse-fade-in { animation: xpulse-fadeIn 0.3s ease both; }
2	.xpulse-spin { animation: xpulse-spin 1s linear infinite; }

1	.xpulse-h1 /* Heading 1 – Fraunces, groß, accent */
2	.xpulse-h2 /* Heading 2 */
3	.xpulse-h3 /* Heading 3 */
4	.xpulse-label /* Uppercase Label – Mono, klein, letter-spacing */
5	.xpulse-text /* Fließtext – Mono, 13px, line-height 1.6 */
6	.xpulse-text-sm /* Kleiner Text – 11px */
7	.xpulse-code /* Code-Block – Mono, Surface-BG, Border */
8	.xpulse-code-inline /* Inline Code */

1	.xpulse-container /* max-width, padding, centered */
2	.xpulse-stack /* flex-column mit gap */
3	.xpulse-row /* flex-row mit gap */
4	.xpulse-divider /* <hr> Equivalent */

1	.xpulse-btn-primary /* Accent-BG, uppercase, volle Breite */
2	.xpulse-btn-secondary /* Border-only, hover → accent */
3	.xpulse-btn-danger /* Border danger, hover → filled */
4	.xpulse-btn-icon /* Icon-only, kein Border */

1	.xpulse-input /* Text/Password Input – styled, focus → accent border */
2	.xpulse-field /* Container mit gap */
3	.xpulse-field-label /* uppercase, klein */
4	.xpulse-field-hint /* dim, klein */

1	.xpulse-card /* Surface-Box mit Border, Padding, Border-Radius */
2	.xpulse-badge /* Kleines Label-Element */
3	.xpulse-tag /* Tag/Pill */
4	.xpulse-table /* Tabelle mit korrektem Spacing */

1	.xpulse-menu-btn /* Menü-Auslöser Button */
2	.xpulse-dropdown /* Dropdown-Container */