Design Tokens
Typografie
Typografie-Tokens steuern Schriftarten, -groessen, -gewichte und Zeichenabstaende. Sie sorgen fuer ein konsistentes Schriftbild ueber alle Komponenten und Themes hinweg.
Schriftarten
Jedes Theme definiert eigene Font-Stacks fuer Ueberschriften und Fliesstext.
Die Tokens koennen direkt als font-family verwendet werden.
| Token | Beschreibung |
|---|---|
--shield-ui-typography-heading-font | Schriftart fuer Ueberschriften |
--shield-ui-typography-body-font | Schriftart fuer Fliesstext |
--shield-ui-font | Basis-Schriftart (Alias) |
Vorschau
Heading Font — The quick brown fox jumps over the lazy dog
Body Font — The quick brown fox jumps over the lazy dog
Schriftgroessen
Groessen-Tokens definieren die typografische Hierarchie.
Alle Werte sind in rem angegeben und skalieren mit der Basis-Schriftgroesse.
| Token | Beschreibung | Vorschau |
|---|---|---|
--shield-ui-typography-h1-size | H1 Schriftgroesse | Aa |
--shield-ui-typography-h2-size | H2 Schriftgroesse | Aa |
--shield-ui-typography-h3-size | H3 Schriftgroesse | Aa |
--shield-ui-typography-body-size | Body Schriftgroesse | Aa |
--shield-ui-typography-caption-size | Caption Schriftgroesse | Aa |
Schriftgewichte
Gewicht-Tokens kontrollieren die Staerke der Schrift. Die Werte nutzen die variable Font-Gewichtsskala (100–900).
| Token | Beschreibung | Vorschau |
|---|---|---|
--shield-ui-typography-h1-weight | H1 Schriftgewicht | Beispieltext |
--shield-ui-typography-h2-weight | H2 Schriftgewicht | Beispieltext |
--shield-ui-typography-h3-weight | H3 Schriftgewicht | Beispieltext |
--shield-ui-typography-body-weight | Body Schriftgewicht | Beispieltext |
Zeichenabstand
Letter-Spacing-Tokens optimieren die Lesbarkeit, besonders bei Ueberschriften.
| Token | Beschreibung | Vorschau |
|---|---|---|
--shield-ui-typography-heading-letter-spacing | Letter-Spacing fuer Ueberschriften | Heading Spacing |