Abstände (Spacing)
Die Spacing API ermöglicht die Verwaltung von Abstandsskalen und -presets.
Endpunkte
Spacing-Skalen
| Methode | Endpunkt | Beschreibung |
|---|
GET | /api/v1/design-system/spacing-scales | Alle Skalen auflisten |
POST | /api/v1/design-system/spacing-scales | Neue Skala erstellen |
GET | /api/v1/design-system/spacing-scales/{id} | Einzelne Skala abrufen |
PUT | /api/v1/design-system/spacing-scales/{id} | Skala aktualisieren |
DELETE | /api/v1/design-system/spacing-scales/{id} | Skala löschen |
Spacing-Presets
| Methode | Endpunkt | Beschreibung |
|---|
GET | /api/v1/design-system/spacing-presets | Alle Presets auflisten |
POST | /api/v1/design-system/spacing-presets | Neues Preset erstellen |
GET | /api/v1/design-system/spacing-presets/{id} | Einzelnes Preset abrufen |
PUT | /api/v1/design-system/spacing-presets/{id} | Preset aktualisieren |
DELETE | /api/v1/design-system/spacing-presets/{id} | Preset löschen |
Das SpacingScale-Objekt
{
"id": "space_abc123",
"organizationId": "org_xyz789",
"name": "default",
"baseUnit": 4,
"values": {
"0": 0,
"px": 1,
"0.5": 2,
"1": 4,
"2": 8,
"3": 12,
"4": 16,
"5": 20,
"6": 24,
"8": 32,
"10": 40,
"12": 48,
"16": 64,
"20": 80,
"24": 96
},
"createdAt": "2026-01-10T08:00:00Z"
}
Das SpacingPreset-Objekt
{
"id": "preset_abc123",
"organizationId": "org_xyz789",
"name": "section-padding",
"description": "Standard-Padding für Sections",
"values": {
"desktop": {
"top": 80,
"right": 40,
"bottom": 80,
"left": 40
},
"tablet": {
"top": 60,
"right": 24,
"bottom": 60,
"left": 24
},
"mobile": {
"top": 40,
"right": 16,
"bottom": 40,
"left": 16
}
},
"createdAt": "2026-01-10T08:00:00Z"
}
Spacing-Skala erstellen
POST /api/v1/design-system/spacing-scales
Request-Body
{
"organizationId": "org_xyz789",
"name": "compact",
"baseUnit": 4,
"generateScale": true,
"maxValue": 64
}
Manuelle Werte
{
"organizationId": "org_xyz789",
"name": "custom",
"baseUnit": 8,
"values": {
"xs": 4,
"sm": 8,
"md": 16,
"lg": 24,
"xl": 32,
"2xl": 48
}
}
Spacing-Preset erstellen
POST /api/v1/design-system/spacing-presets
Request-Body
{
"organizationId": "org_xyz789",
"name": "card-padding",
"description": "Padding für Card-Komponenten",
"values": {
"desktop": { "top": 24, "right": 24, "bottom": 24, "left": 24 },
"tablet": { "top": 20, "right": 20, "bottom": 20, "left": 20 },
"mobile": { "top": 16, "right": 16, "bottom": 16, "left": 16 }
}
}
Shorthand-Notation
{
"name": "button-padding",
"values": {
"desktop": { "y": 12, "x": 24 },
"mobile": { "y": 10, "x": 20 }
}
}
CSS-Export
:root {
/* Spacing Scale */
--space-0: 0;
--space-px: 1px;
--space-0-5: 2px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
}
Verwendung in Sections
Presets können direkt in Sections referenziert werden:
{
"sectionId": "sec_abc123",
"styles": {
"paddingPreset": "section-padding"
}
}
Fehler
| Code | Beschreibung |
|---|
400 | Ungültige Spacing-Werte |
401 | Nicht authentifiziert |
403 | Keine Berechtigung |
404 | Skala/Preset nicht gefunden |
Nächste Schritte
