Design Tokens

Spacing

Spacing-Tokens sorgen dafuer, dass Abstaende im gesamten Design-System konsistent bleiben. Das Token-System arbeitet dabei mit zwei Ebenen: einer festen Basis-Skala und einer theme-spezifischen UI-Skala.

Zwei Ebenen — warum?

Im Design-System gibt es Spacing-Tokens auf zwei Ebenen. Das klingt erstmal redundant, hat aber einen konkreten Grund:

--shield-space-* (Basis-Skala)
Feste Werte, die in jedem Theme identisch sind. Sie definieren das zugrundeliegende Raster und aendern sich nie — egal ob Shield, Horizon, Light oder Dark.

--shield-ui-space-* (UI-Skala)
Theme-spezifische Abstaende, die pro Theme angepasst werden koennen. Shield referenziert die Basis-Skala 1:1 — aber Horizon ueberschreibt diese Werte mit ca. 10–20% groesseren Abstaenden, um das bewusst luftigere Look-and-Feel des Themes umzusetzen.

Kurz gesagt: Die Basis-Skala ist das Fundament, die UI-Skala ist die theme-bewusste Schicht darueber.

Basis-Skala `--shield-space-*`

Definiert in base.json. Diese Werte sind global und unveraenderlich — sie bleiben identisch, egal welches Theme aktiv ist.

Token	Wert	Vorschau
`--shield-space-0`	`0rem`
`--shield-space-1`	`0.25rem`
`--shield-space-2`	`0.5rem`
`--shield-space-3`	`0.75rem`
`--shield-space-4`	`1rem`
`--shield-space-6`	`1.5rem`
`--shield-space-8`	`2rem`

UI-Skala `--shield-ui-space-*`

Definiert pro Theme. Shield referenziert die Basis-Skala 1:1. Horizon ueberschreibt die Werte und macht sie groesser — das gibt dem Theme seinen charakteristisch luftigeren Charakter.

Token	Verwendung	Vorschau
`--shield-ui-space-0`	Kein Abstand
`--shield-ui-space-1`	Sehr klein — Inline-Elemente, Badges
`--shield-ui-space-2`	Klein — Icon-Gaps, enge Gruppen
`--shield-ui-space-3`	Mittel — Card-Padding, Listenelemente
`--shield-ui-space-4`	Standard — Formfelder, Abschnitte
`--shield-ui-space-6`	Gross — Section-Trennung
`--shield-ui-space-8`	Sehr gross — Page-Sections

Vergleich: Shield vs. Horizon

Diese Tabelle zeigt konkret, wie Horizon die UI-Spacing-Tokens gegenueber der Basis-Skala anpasst. Shield uebernimmt die Basis-Werte 1:1, Horizon macht sie durchgehend groesser:

Stufe	Basis / Shield	Horizon	Differenz
`space-0`	`0rem`	`0rem`	—
`space-1`	`0.25rem`	`0.3rem`	+20%
`space-2`	`0.5rem`	`0.6rem`	+20%
`space-3`	`0.75rem`	`0.85rem`	+13%
`space-4`	`1rem`	`1.1rem`	+10%
`space-6`	`1.5rem`	`1.6rem`	+7%
`space-8`	`2rem`	`2.2rem`	+10%

Horizon nutzt durchgehend 7–20% groessere Abstaende. Wer --shield-ui-space-* verwendet, bekommt diese Anpassung automatisch — wer stattdessen --shield-space-* nutzt, sieht in beiden Themes exakt denselben Abstand.

Welchen Token verwenden?

✔ Empfehlung: `--shield-ui-space-*`

Fuer den Grossteil aller Anwendungsfaelle. Wenn deine Komponente oder dein Layout sich ans aktive Theme anpassen soll, verwende immer die UI-Skala. Damit wirken Abstaende in Shield kompakt und in Horizon luftig — genau wie gewuenscht.

Padding / Margin in Komponenten
Gap in Flex/Grid-Layouts
Abstaende zwischen Sections
Innenabstaende von Cards, Dialogen, Formularen

⚠ Ausnahme: `--shield-space-*`

Nur verwenden, wenn ein Abstand bewusst theme-unabhaengig bleiben soll. Typische Faelle:

Technische Abstaende, die sich nicht aendern duerfen (z.B. feste Icon-Offsets)
Abstaende in theme-uebergreifenden Utility-Klassen
Debugging oder direkte Wert-Kontrolle

Praxisbeispiele

Card-Komponente

Padding und Gap passen sich automatisch ans Theme an:

.card {
  padding: var(--shield-ui-space-4);
  border-radius: 0.5rem;
  border: 1px solid var(--shield-ui-border);
}

.card__header {
  display: flex;
  align-items: center;
  gap: var(--shield-ui-space-2);    /* Icon + Titel */
  margin-bottom: var(--shield-ui-space-3);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--shield-ui-space-2);    /* Abstand zwischen Absaetzen */
}

Formular-Layout

Abstaende zwischen Feldern und innerhalb von Gruppen:

.form {
  display: flex;
  flex-direction: column;
  gap: var(--shield-ui-space-4);    /* Abstand zwischen Feldern */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--shield-ui-space-1);    /* Label zu Input */
}

.form-actions {
  display: flex;
  gap: var(--shield-ui-space-3);    /* Abstand zwischen Buttons */
  margin-top: var(--shield-ui-space-6);
}

Page-Section mit fixem Icon-Offset

Hier wird die Basis-Skala bewusst fuer ein technisches Detail genutzt:

.section-header {
  margin-bottom: var(--shield-ui-space-6);  /* ✔ theme-responsiv */
}

.icon-badge {
  /* Fester Offset, der in allen Themes gleich bleibt */
  top: var(--shield-space-1);               /* ⚠ bewusst fix: 0.25rem */
  right: var(--shield-space-1);
}