Farben
Es gibt keine Farbe im CSS, die nicht als Variable --lg-… existiert. Die Werte auf dieser Seite werden live aus dem aktuell gewählten Design gelesen. Wechseln Sie das Design oben rechts und sehen Sie zu.
Flächen und Rahmen
| Farbe | Variable | Wert | Verwendung |
|---|---|---|---|
--lg-page | | Seitengrund, Eingabefelder, Tabellenzellen | |
--lg-face | | Fenster, Schaltflächen, Leisten | |
--lg-face-hi | | Lichtkante an erhabenen Flächen | |
--lg-face-lo | | Feine Trennlinien, Innenschatten | |
--lg-face-dk | | Gruppenrahmen, Schattenkante | |
--lg-panel | | Hinweise, Zebrastreifen, Code-Hintergrund | |
--lg-edge | | Dunkler Außenrahmen von Schaltflächen | |
--lg-frame | | Fensterrahmen | |
--lg-field | | Eingabefelder, Listen, Tabellen | |
--lg-field-border | | Rahmen von Eingabefeldern |
Text, Links und Auswahl
| Farbe | Variable | Wert | Verwendung |
|---|---|---|---|
--lg-text | | Fließtext | |
--lg-text-muted | | Hinweise, Beschriftungen | |
--lg-text-disabled | | Deaktivierte Elemente | |
--lg-heading | | Überschriften | |
--lg-link | | Links | |
--lg-visited | | Besuchte Links | |
--lg-sel-bg | | Auswahl, Menüauswahl, aktuelle Seite | |
--lg-hover-row | | Zeile unter dem Mauszeiger | |
--lg-accent | | Akzent bei Hover und aktivem Reiter | |
--lg-default-ring | | Ring der Standardschaltfläche | |
--lg-check | | Haken und Punkt in Auswahlfeldern | |
--lg-focus | | Gepunkteter Fokusrahmen |
Status
Statusfarben stehen nie allein. Es gibt immer Text, ein Symbol oder beides.
| Farbe | Variable | Wert | Beispiel |
|---|---|---|---|
--lg-ok | | Dienst läuft | |
--lg-warn | | Eingeschränkt | |
--lg-err | | Ausgefallen | |
--lg-info | | Hinweis | |
--lg-progress | | Blöcke im Fortschrittsbalken | |
--lg-tip-bg | | Kurzinfo und Sprechblase |
Verläufe
Verläufe gibt es nur dort, wo das Vorbild sie hatte: Titelleiste, Schaltfläche, Aufgabenbereich und Kopfzeile.
| Muster | Variable | Verwendung |
|---|---|---|
--lg-title-bg | Titelleiste von Fenstern und Dialogen | |
--lg-btn-bg | Schaltflächen, Tabellenköpfe, Reiter | |
--lg-pane-bg | Grund des Aufgabenbereichs (links) | |
--lg-pane-head-bg | Kopf einer Aufgabengruppe | |
--lg-header-bg | Kopfzeile mit Logo |
Markenfarben
Die vier Kacheln im Icon sind die einzigen Farben, die in jedem Design gleich bleiben dürfen. Nur die blaue Kachel passt sich dem Design an.
| Kachel | Variable | Wert | Buchstabe |
|---|---|---|---|
--lg-brand-t | | T | |
--lg-brand-r | | R | |
--lg-brand-f | | F | |
--lg-brand-x | | X |
Kontraste, live gemessen
Die Tabelle rechnet beim Laden und bei jedem Designwechsel nach WCAG 2.1 (relative Luminanz). Mindestwert für normalen Text ist 4,5 : 1.
| Paar | Muster | Verhältnis | Ergebnis |
|---|---|---|---|
| Text auf Fläche | Aa | … | … |
| Text auf Seitengrund | Aa | … | … |
| Hinweistext auf Fläche | Aa | … | … |
| Auswahl | Aa | … | … |
| Link auf Seitengrund | Aa | … | … |
| Überschrift auf Seitengrund | Aa | … | … |
| Fehlertext auf Seitengrund | Aa | … | … |
| Kurzinfo | Aa | … | … |
| Deaktiviert (ausgenommen) | Aa | … | … |