Liquid Glass Web

Que fait Liquid Glass Web ?

Un système de design web qui adapte le modèle de matériau Liquid Glass aux navigateurs. Le contenu repose sur une couche opaque, et une fine couche fonctionnelle translucide de navigation et de contrôles flotte au-dessus. Il s'agit d'une adaptation indépendante des directives publiques d'Apple dans "Adopting Liquid Glass". Il n'inclut aucune police, symbole ou ressource Apple.

Ce que contient ce skill

Chemin	Utilisation
assets/tokens.json	Source de vérité : couleurs (thèmes light, dark, contrast), typographie, espacement, rayon, taille, matériau, ombre.
assets/tokens.css	Propriétés personnalisées CSS compilées et classes de typographie. Régénérez avec scripts/build_tokens_css.py après avoir modifié les jetons.
assets/liquid-glass.css	Styles de composants (classes lg-*). Indépendant du framework.
assets/liquid-glass.react.js	Bundle React 18 optionnel exposant window.LG (script classique ; nécessite window.React et window.ReactDOM).
assets/liquid-glass.d.ts	Props des composants, sous forme de documentation.
assets/example.html	Un écran complet en HTML simple. Copiez sa structure.
references/brand-book.md	Principes, ton, couleur, matériau, typographie, mise en page, mouvement, iconographie, accessibilité. À lire avant de concevoir.
references/html-api.md	Balisage pour chaque composant sans React.
references/components/<Nom>.md	Directives par composant : ce que fournit le consommateur, à faire et à ne pas faire.
scripts/contrast_check.py	Vérification WCAG de chaque paire de jetons dans chaque thème, y compris le verre dans le pire des cas. Sortie avec code 1 en cas d'échec.
scripts/build_tokens_css.py	Compile tokens.json en tokens.css.

Flux de travail

A. Construire ou restyler une interface

1. Lisez references/brand-book.md, puis les fichiers de composants dont vous avez besoin dans references/components/.
2. Copiez assets/tokens.css et assets/liquid-glass.css dans le projet et chargez-les dans cet ordre. Dans les projets React, le bundle ou un portage du balisage dans references/html-api.md fonctionnent tous les deux. Dans d'autres frameworks, portez le balisage.
3. Disposez deux couches :
   • Contenu : opaque, sur canvas et surface. Tout ce que les gens lisent va ici.
   • Verre : uniquement la navigation et les contrôles, flottant au-dessus du contenu défilant (barre d'outils, barre d'onglets, groupes, menus, feuilles moyennes).
4. Utilisez les jetons par leur nom (var(--accent)). Ne codez jamais en dur une couleur, un rayon ou une valeur d'espacement couvert par un jeton.
5. Exécutez la liste de contrôle ci-dessous avant de terminer.

B. Re-branding (nouvelle accentuation ou neutres)

1. Modifiez les valeurs dans assets/tokens.json uniquement. Conservez les noms des jetons, car le CSS en dépend.
2. Chaque accentuation modifiée a besoin de ses compagnons dans chaque thème : accent, on-accent, accent-text, accent-glass, focus-ring. Si l'accentuation du thème sombre est claire, on-accent doit être sombre.
3. Exécutez python3 scripts/contrast_check.py assets/tokens.json. Ajustez les valeurs jusqu'à ce qu'il affiche RESULT: PASS. N'affaiblissez pas les seuils.
4. Exécutez python3 scripts/build_tokens_css.py assets/tokens.json > assets/tokens.css.
5. Conservez les jetons de verre (glass-fill, glass-edge, glass-lift, glass-blur) sauf demande contraire. La couche de verre reste incolore.

Règles non-négociables

• Le verre uniquement sur la couche fonctionnelle. Jamais sur les lignes de liste, les cartes de contenu ou les sections de page, et jamais de verre sur du verre.
• Le texte sur du verre normal utilise uniquement ink, ink-glass-muted, accent-glass ou critical-glass. N'utilisez jamais ink-secondary, accent-text ou critical sur du verre : ils échouent sur un contenu sombre ou lumineux.
• Verre clair (lg-glass--clear) uniquement au-dessus de photos, vidéos ou cartes, avec lg-dim en dessous. Seuls les symboles et les étiquettes en gras de 19px+ vont dessus.
• Un bouton prominent par vue. Chaque contrôle est une capsule (radius-full). Les rayons imbriqués sont concentriques : intérieur = extérieur − retrait.
• Les zones de contact font au moins target-min (44px). Tout contrôle uniquement iconique a un aria-label.
• Un statut associe toujours un glyphe et un mot ; la couleur seule ne véhicule jamais de sens.
• Respectez prefers-reduced-transparency, prefers-contrast et prefers-reduced-motion. Le CSS les gère ; ne les remplacez pas.
• N'utilisez pas les SF Symbols d'Apple, les polices Apple ou les logos. La pile typographique utilise la police système de l'appareil ; le jeu d'icônes dans le bundle React est un espace réservé original.

Liste de contrôle avant livraison

• Pas d'arrière-plan personnalisé derrière les barres ; le contenu défile en dessous, avec l'effet de bord de défilement lg-edge là où les barres chevauchent le contenu.
• La quantité de verre est faible (barres, groupes, menus, feuille). Rien d'autre n'est en verre.
• Écrans vérifiés dans data-theme="light", "dark" et "contrast".
• Si les jetons ont été modifiés : contrast_check.py affiche PASS, et tokens.css est régénéré.
• Clavier : chaque contrôle est accessible et affiche le contour focus-ring.
• Rédaction : casse de phrase pour les actions, Titre de Casse uniquement pour les en-têtes de sections de liste, verbe en premier, pas d'emoji.