Liquid Glass Web

Was macht Liquid Glass Web?

Ein Web-Designsystem, das das Liquid-Glass-Materialmodell für Browser adaptiert. Inhalte liegen auf einer undurchsichtigen Ebene, und eine dünne, transluzente Funktionsebene aus Navigation und Steuerelementen schwebt darüber. Es handelt sich um eine unabhängige Adaption der öffentlichen Richtlinien in Apples „Adopting Liquid Glass“. Es enthält keine Apple-Schriftarten, -Symbole oder -Assets.

Was dieses Skill enthält

Pfad	Verwendung
assets/tokens.json	Quelle der Wahrheit: Farben (Themen light, dark, contrast), Typografie, Abstände, Radien, Größen, Material, Schatten.
assets/tokens.css	Kompilierte CSS-Custom-Properties und Typografie-Klassen. Neu generieren mit scripts/build_tokens_css.py nach Änderungen an den Tokens.
assets/liquid-glass.css	Komponenten-Stile (lg-*-Klassen). Framework-agnostisch.
assets/liquid-glass.react.js	Optionales React-18-Bundle, das window.LG bereitstellt (klassisches Skript; benötigt window.React und window.ReactDOM).
assets/liquid-glass.d.ts	Komponenten-Props als Dokumentation.
assets/example.html	Ein vollständiger Bildschirm in reinem HTML. Kopiere seine Struktur.
references/brand-book.md	Prinzipien, Stimme, Farbe, Material, Typografie, Layout, Bewegung, Ikonografie, Barrierefreiheit. Vor dem Design lesen.
references/html-api.md	Markup für jede Komponente ohne React.
references/components/<Name>.md	Richtlinien pro Komponente: was der Anwender bereitstellt, Do's und Don'ts.
scripts/contrast_check.py	WCAG-Prüfung jedes Token-Paares in jedem Theme, einschließlich des schlimmsten Falls auf Glas. Beendet mit Exit 1 bei Fehler.
scripts/build_tokens_css.py	Kompiliert tokens.json in tokens.css.

Arbeitsablauf

A. UI erstellen oder umgestalten

1. Lies references/brand-book.md, dann die benötigten Komponentendateien aus references/components/.
2. Kopiere assets/tokens.css und assets/liquid-glass.css in das Projekt und lade sie in dieser Reihenfolge. In React-Projekten funktionieren sowohl das Bundle als auch eine Portierung des Markups aus references/html-api.md. In anderen Frameworks portiere das Markup.
3. Lege zwei Ebenen an:
   • Inhalt: undurchsichtig, auf canvas und surface. Alles, was gelesen wird, gehört hierhin.
   • Glas: nur Navigation und Steuerelemente, die über scrollenden Inhalten schweben (Toolbar, Tab-Leiste, Gruppen, Menüs, mittlere Sheets).
4. Verwende Tokens beim Namen (var(--accent)). Hartcodiere niemals einen Farb-, Radius- oder Abstandswert, der durch einen Token abgedeckt ist.
5. Führe die folgende Checkliste aus, bevor du fertig bist.

B. Umbranding (neue Akzent- oder Neutrale Farben)

1. Ändere nur Werte in assets/tokens.json. Behalte die Token-Namen bei, da das CSS von ihnen abhängt.
2. Jede geänderte Akzentfarbe benötigt ihre Begleiter in jedem Theme: accent, on-accent, accent-text, accent-glass, focus-ring. Wenn die Akzentfarbe im dunklen Theme hell ist, muss on-accent dunkel sein.
3. Führe python3 scripts/contrast_check.py assets/tokens.json aus. Passe die Werte an, bis RESULT: PASS ausgegeben wird. Schwäche die Schwellenwerte nicht ab.
4. Führe python3 scripts/build_tokens_css.py assets/tokens.json > assets/tokens.css aus.
5. Behalte die Glas-Tokens (glass-fill, glass-edge, glass-lift, glass-blur) bei, sofern nicht anders gefordert. Die Glasebene bleibt farblos.

Nicht verhandelbare Regeln

• Glas nur auf der Funktionsebene. Niemals auf Listenzeilen, Inhaltskarten oder Seitenabschnitten, und niemals Glas auf Glas.
• Text auf normalem Glas verwendet nur ink, ink-glass-muted, accent-glass oder critical-glass. Verwende niemals ink-secondary, accent-text oder critical auf Glas: sie versagen über dunklen oder hellen Inhalten.
• Klares Glas (lg-glass--clear) nur über Fotos, Videos oder Karten, mit lg-dim darunter. Nur Symbole und fette Labels ab 19px werden darauf platziert.
• Ein prominent-Button pro Ansicht. Jedes Steuerelement ist eine Kapsel (radius-full). Verschachtelte Radien sind konzentrisch: innen = außen − Einzug (inset).
• Berührungsflächen sind mindestens target-min (44px). Jedes reine Symbol-Steuerelement hat ein aria-label.
• Ein Status besteht immer aus einem Glyph und einem Wort; Farbe allein trägt nie eine Bedeutung.
• Respektiere prefers-reduced-transparency, prefers-contrast und prefers-reduced-motion. Das CSS kümmert sich darum; überschreibe es nicht.
• Verwende keine Apple SF-Symbole, Apple-Schriftarten oder -Logos. Der Type-Stack verwendet die Systemschriftart des Geräts; das Symbolset im React-Bundle ist ein originärer Platzhalter.

Checkliste vor der Abgabe

• Kein benutzerdefinierter Hintergrund hinter Leisten; Inhalt scrollt unter ihnen, mit dem lg-edge-Scrollkanteneffekt, wo Leisten Inhalt überlappen.
• Die Glasanzahl ist gering (Leisten, Gruppen, Menüs, Sheet). Nichts anderes ist aus Glas.
• Bildschirme geprüft in data-theme="light", "dark" und "contrast".
• Wenn Tokens geändert wurden: contrast_check.py gibt PASS aus, und tokens.css wurde neu generiert.
• Tastatur: Jedes Steuerelement ist erreichbar und zeigt den focus-ring-Umriss.
• Text: Satzfall bei Aktionen, Titelfall nur bei Listensektions-Headern, Verb zuerst, kein Emoji.