glasskit

GlassKit est une bibliothèque de composants en pur CSS basée sur une esthétique glassmorphism, que son README décrit comme étant inspirée du "Liquid Glass" d'iOS 26 d'Apple et du langage de conception de visionOS. Elle s'adresse aux applications et interfaces devant paraître natives et modernes sans nécessiter de framework JavaScript ou d'étape de build. Ce que contient le dépôt - glasskit.css, la bibliothèque principale contenant tous les composants et jetons de conception - glasskit.min.css, une version minifiée générée lors de la publication - glasskit-styles.js, une Constructable Stylesheet pour une utilisation à l'intérieur du Shadow DOM - theme-override.css, un modèle pour des thèmes de marque personnalisés incluant quatre exemples de thèmes (Ocean Blue, Emerald Green, Rose, et un emplacement personnalisé vide) - index.html, showcase.html et docs.html, ainsi que des traductions allemandes de ces pages dans un dossier de/ - SKILL.md, une référence structurée des composants destinée aux LLM et aux assistants de codage - Le projet est sous licence MIT et a été développé par Jungherz GmbH. Une démo publique, une documentation et une vitrine sont hébergées sur glasskit.jungherz.com. Composants et blocs de construction Le README regroupe les composants en navigation et mise en page (arrière-plan avec gradient aurora, barre de navigation, bouton icône pilule arrondi, barre d'onglets inférieure fixe, variante de barre d'onglets flottante en forme de pilule avec capsule accessoire optionnelle, accordéon, séparateur), contenu (titre, carte, variante de carte lumineuse, badge, avatar, avis de statut et liste groupée style iOS), actions et retours (boutons primaire, secondaire et tertiaire, modal avec superposition floue, toast, popover ancré avec animation de fondu et d'échelle), et éléments de formulaire (champ de saisie, zone de texte, sélection, champ de recherche, commutateur style iOS, case à cocher, bouton radio, curseur de plage et barre de progression). Au total, le projet affirme offrir 24 composants. Au-delà des composants, la bibliothèque fournit des classes utilitaires avec un préfixe gl- distinct pour la mise en page flex, l'espacement, l'alignement du texte et le dimensionnement, parallèlement aux classes de composants préfixées par glass-. Le nommage suit une convention de type BEM afin que les classes n'entrent pas en conflit avec les feuilles de style existantes. Thématisation et jetons de conception Les modes sombre et clair sont tous deux pris en charge et commutés en définissant un attribut data-theme sur l'élément html ; un composant de commutation de thème prêt à l'emploi est inclus. Presque chaque valeur visuelle est exposée sous forme de propriété CSS personnalisée : couleurs primaires et de texte, cinq gradations de surface de verre, trois niveaux de flou, rayons pour les cartes, les boutons et les entrées, une échelle d'espacement, ainsi que des jetons d'ombre et d'encastrement. La personnalisation de la marque se fait en déclarant --gl-color-primary et sa variante sombre ; depuis la version 1.11.0, le point milieu du gradient, l'anneau de focus, la lueur du bouton et le curseur de plage sont dérivés de ces valeurs. Le README note que les variables de marque doivent être déclarées sur :root car les propriétés personnalisées sont substituées là où elles sont déclarées. Web Components et Shadow DOM Comme les feuilles de style externes ne traversent pas la frontière d'un shadow root, la bibliothèque exporte un module ES fournissant glassSheet, une CSSStyleSheet partagée qui peut être assignée à adoptedStyleSheets, ainsi qu'un export de chaîne css en guise de solution de repli. Le README montre l'utilisation avec un élément personnalisé simple, avec Hybrids.js et avec Lit, et souligne que les propriétés personnalisées --gl-* et la commutation de thème fonctionnent toujours à travers les shadow roots. Installation et compatibilité GlassKit peut être chargé depuis jsDelivr ou unpkg via une balise link, installé depuis npm sous @jungherz-de/glasskit et importé depuis CSS ou JavaScript, ou téléchargé directement depuis les releases GitHub. Le README indique une empreinte de 51 Ko brut, 39 Ko minifié et 6,5 Ko gzippé, sans dépendances externes. L'effet de verre repose sur backdrop-filter ; le README liste un support complet dans Safari, Chrome/Edge et Samsung Internet, et un support dans Firefox à partir de la version 103, précisant que sans backdrop-filter, l'interface reste utilisable avec des couleurs d'arrière-plan simples définies. La bibliothèque est présentée comme le fondement CSS d'une famille en trois parties : GlassKit Elements fournit des éléments personnalisés en JavaScript vanilla pour les interfaces d'applications, et GlassKit Web est un modèle de site Astro avec des sections, i18n et SEO basés sur le même langage de conception. Les contributions sont encouragées en suivant le nommage de type BEM, les jetons de conception existants, la couverture des modes sombre et clair, et des cibles tactiles d'au moins 44px.