Design Tokens
Farben
Farb-Tokens bilden die semantische Farbpalette des Themes. Statt fester Farbwerte werden Tokens verwendet, die sich zwischen Themes (Shield, Horizon) und Modi (Light, Dark) automatisch anpassen.
Hintergruende
Hintergrund-Tokens fuer Seiten, Oberflaechen und hervorgehobene Bereiche.
--shield-ui-bg Seiten-Hintergrund — Aeusserer Page-Hintergrund --shield-ui-surface Oberflaechen-Hintergrund — Karten, Panels, Dialoge --shield-ui-brand-soft Sanfter Brand-Hintergrund — Hervorgehobene Bereiche, Highlights Text
Text-Tokens fuer primaere und sekundaere Beschriftungen.
--shield-ui-text Haupttext — Standard-Textfarbe --shield-ui-text-muted Gedaempfter Text — Sekundaerer Text, Platzhalter Brand
Brand-Tokens fuer die primaere Markenfarbe und deren Kontrast.
--shield-ui-brand Brand-Farbe — Primaer-Buttons, Links, Akzente --shield-ui-brand-contrast Kontrast auf Brand — Text auf Brand-Hintergrund Rahmen
Border-Token fuer Trennlinien und Raender.
--shield-ui-border Rahmenfarbe — Trennlinien, Kartenraender, Inputs