Premiers pas avec Lily

Installation

Lily est publiée sous forme de dépôts Git distincts par framework. Le moyen le plus rapide de l'essayer est de cloner le dépôt headless de votre pile :

git clone https://github.com/LilyDesignSystem/lily-design-system-react-headless
cd lily-design-system-react-headless
pnpm install

Le même schéma fonctionne pour les autres frameworks :

• @lilydesignsystem/html-headless — aucune installation nécessaire ; copiez les fichiers .html
• @lilydesignsystem/svelte-headless — pnpm install
• @lilydesignsystem/react-headless — pnpm install
• @lilydesignsystem/vue-headless — pnpm install
• @lilydesignsystem/angular-headless — pnpm install
• @lilydesignsystem/nunjucks-headless — pnpm install
• lily-design-system-blazor-headless — dotnet build

Les bibliothèques headless sont conçues pour être clonées ou intégrées au projet — considérez le code source comme la source de vérité et copiez ce dont vous avez besoin. Les assistants de préférences sont en outre livrés sous forme de paquets installables avec une chaîne de compilation et de publication (npm pour les frameworks JS, NuGet pour Blazor).

Utiliser un composant headless

Les composants headless fournissent du HTML sémantique, ARIA et des propriétés — mais aucun CSS. Voici un bouton dans chaque framework :

HTML

<button class="button" type="button" aria-label="Save">
  Save
</button>

Svelte

<script>
  import Button from "lily-design-system-svelte-headless/components/Button/Button.svelte";
</script>

<Button onclick={save}>Save</Button>

React

import Button from "lily-design-system-react-headless/components/Button";

<Button onClick={save}>Save</Button>

Vue

<script setup>
  import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<Button @click="save">Save</Button>

Angular

import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})

Blazor

<Button OnClick="Save">Save</Button>

Nunjucks

{% from "components/button/macro.njk" import button %}

{{ button({ text: "Save", type: "button" }) }}

Utiliser un exemple stylé

Les applications d'exemple comprennent du CSS, des routes et des pages de démonstration complètes. Le moyen le plus rapide d'expérimenter est de lancer l'application d'exemple SvelteKit, Next, Nuxt, Analog ou Eleventy et de consulter la démonstration sur /components.

git clone https://github.com/LilyDesignSystem/lily-design-system-svelte-sveltekit-examples
cd lily-design-system-svelte-sveltekit-examples
pnpm install
pnpm run dev

Ouvrez ensuite http://localhost:5173 et parcourez /components.

Mise en forme et jetons de design

Chaque composant s'affiche avec une seule classe en kebab-case sur son élément racine. Par exemple, <Button> produit <button class="button">. Stylez-le comme vous voulez :

.button {
  background: var(--my-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}
.button:hover { background: var(--my-primary-hover); }

La palette de couleurs par défaut de Lily (utilisée dans les applications d'exemple) est :

• Primaire : #2563eb
• Danger : #dc2626
• Avertissement : #f59e0b
• Succès : #16a34a
• Arrière-plan de page : #f9fafb
• Arrière-plan de carte : #ffffff

Ce sont des suggestions, pas des obligations. Remplacez-les par la palette de votre propre marque et Lily s'y adapte volontiers.

Thèmes prêts à l'emploi

Vous ne voulez pas écrire du CSS de zéro ? Lily fournit 45 thèmes de référence autonomes dans le répertoire themes/. Chacun est une feuille de style qui cible les classes d'accroche de Lily — liez-la et le tour est joué :

<link rel="stylesheet" href="/assets/themes/united-kingdom-government-digital-service.css" />

L'ensemble couvre :

• Secteur public — NHS England, NHS Scotland et NHS Wales (variantes pour les patients et pour les praticiens), GOV.UK GDS et le système de conception web des États-Unis.
• Inspirés de fournisseurs — Adobe Spectrum, Mozilla Protocol.
• Usage général — clair, sombre, nord, dracula, wireframe et une trentaine d'autres.

Les sélecteurs des thèmes utilisent :where(...), si bien que votre propre CSS l'emporte toujours en spécificité. Associez-les à l'assistant theme-picker ci-dessous pour changer à l'exécution, ou suivez le tutoriel sur les thèmes.

Assistants de préférences

Chaque framework a un catalogue compagnon *-helpers avec huit petits sélecteurs (et un picker-bar qui les assemble). Chacun est un bouton à icône headless qui ouvre une fenêtre contextuelle — une liste d'options, une liste de liens, un formulaire de recherche ou (pour date-time-picker) une boîte de dialogue de sélection de date — et non un <select> natif ; il est compatible SSR et ne livre aucun CSS :

• theme-picker — charge les feuilles de style de thème à l'exécution en échangeant un <link> géré, définit data-theme sur le document et, en option, enregistre dans localStorage.
• locale-picker — définit lang et dir (avec détection automatique de l'écriture de droite à gauche) pour que votre bibliothèque d'i18n puisse suivre ; ne traduit rien lui-même.
• text-size-picker — définit data-text-size sur le document ; votre CSS associe chaque valeur à une taille de police.
• motion-picker — définit data-motion sur le document, à partir du réglage de réduction des animations du visiteur ; votre CSS et vos scripts décident quoi supprimer.
• search-picker — un bouton à icône qui ouvre un champ de recherche ; l'envoi mène à une page de recherche. Gère une action, pas une préférence.
• link-picker — une icône d'accueil qui ouvre un menu des liens de pages définis par votre application (Accueil, À propos de nous, Nous contacter, Politique de confidentialité, …). Gère une action, pas une préférence.
• share-picker — ouvre la feuille de partage native ou une liste de destinations fournie par le consommateur, plus la copie de l'URL. Gère une action, pas une préférence : n'applique rien, ne conserve rien.
• date-time-picker — un champ de texte plus une boîte de dialogue de sélection de date APG pour une date, une heure ou les deux. Gère une valeur de formulaire, pas une préférence : la chaîne ISO fait l'aller-retour avec <input type="date">.

git clone https://github.com/LilyDesignSystem/lily-design-system-svelte-helpers

Le catalogue Svelte est la référence canonique ; les portages React, Vue, Angular, HTML, Nunjucks, Web Components et Blazor lui correspondent contrat pour contrat. Voir le tutoriel sur les assistants.

Accessibilité

Les composants visent WCAG 2.2 AAA. Ils suivent ces motifs :

• Des éléments HTML sémantiques plutôt que des <div> génériques.
• <label for="id"> pour relier les libellés aux champs.
• aria-labelledby / aria-describedby pour les références croisées.
• aria-invalid + aria-errormessage pour les états d'erreur.
• role="alert" et aria-live pour le contenu dynamique.
• aria-pressed, aria-expanded, aria-current pour l'état.
• tabindex itinérant pour les grilles.

Les indicateurs de focus sont volontairement fournis par le consommateur — Lily ne dessine jamais d'anneau de focus par défaut qui entrerait en conflit avec votre design. Les applications d'exemple conservent une base axe-core propre sur toutes leurs routes.

Internationalisation

Chaque libellé, texte indicatif, message d'erreur et texte de bouton est une propriété. Il n'y a aucune chaîne écrite en dur. Branchez le framework de traduction de votre choix — Paraglide, i18next, vue-i18n, react-intl, fichiers .resx, peu importe.

Pour les dates, les nombres et les devises, les composants acceptent des chaînes déjà formatées : vous formatez avec Intl.DateTimeFormat / Intl.NumberFormat / votre bibliothèque préférée et vous transmettez le résultat.

L'assistant locale-picker signale la locale choisie à votre bibliothèque d'i18n en définissant lang et dir sur la racine du document.

Tests

Chaque sous-projet de framework livre ses propres tests avec sa pile idiomatique :

• HTML : WebDriverIO dans de vrais navigateurs.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular : Vitest + TestBed (via le plugin Vite d'Analog).
• Nunjucks : Vitest avec un assistant de rendu.
• Blazor: bUnit.

Les tests utilisent uniquement les comparateurs intégrés de Vitest — jamais ceux de jest-dom. Cela garde les suites de tests portables. Les applications d'exemple ajoutent des suites Playwright de bout en bout, des bases d'accessibilité axe-core et un balayage de tailles de fenêtre adaptatives.

Agents IA

Ce site publie llms.txt et llms.json à sa racine — une carte soignée de ses pages les plus importantes, pour tout outil qui suit la convention llms.txt.

Le monodépôt canonique fournit en outre deux compétences Claude : lily-design-system-skill, une compétence généraliste couvrant les concepts, la terminologie et les motifs de composition de Lily pour quiconque construit avec le système, et lily-design-system-maintainer-skill, une compétence technique couvrant l'organisation des fichiers requis et l'outillage du monodépôt pour quiconque y travaille. Les deux se trouvent à la racine du monodépôt canonique.

Dépannage

Contribuer

Lily est jeune et accueille volontiers la collaboration. Les contributions les plus utiles en ce moment sont :

• De nouveaux composants (surtout des motifs issus de systèmes de conception établis).
• De nouveaux thèmes — chacun est une feuille de style autonome, une première demande de fusion bien délimitée.
• Une meilleure mise en forme des exemples — montrez ce qui est possible.
• Des traductions des chaînes des applications d'exemple.
• Des rapports de bogues avec un cas reproductible minimal.
• Des audits d'accessibilité avec des lecteurs d'écran et des technologies d'assistance.

Ouvrez des tickets et des demandes de fusion sur le dépôt concerné de github.com/LilyDesignSystem.

Communauté et assistance

• Questions et rapports de bogues — ouvrez un ticket sur le dépôt concerné de github.com/LilyDesignSystem.
• E-mail — le responsable lit joel@joelparkerhenderson.com et accueille la collaboration, les conseils et les retours.
• Miroirs — Lily est aussi poussée vers Codeberg et GitLab, afin que vous puissiez participer depuis la forge de votre choix.
• Conduite — le projet suit un code de conduite standard ; soyez bienveillant, présumez la bonne foi.

FAQ