Komma igång med Lily

Installera

Lily bor i ett enda Git-monorepo, med en katalog för varje ramverks huvudlösa bibliotek, hjälparpaket och exempelapp. Det snabbaste sättet att prova är att klona monorepot och öppna det huvudlösa biblioteket för din stack:

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

Samma mönster fungerar för de andra ramverken:

• @lilydesignsystem/html-headless – ingen installation behövs; kopiera .html -filer
• @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

De huvudlösa biblioteken är utformade för att klonas eller kopieras in – betrakta källkoden som sanningskälla och kopiera det du behöver. inställningshjälparna levereras dessutom som installerbara paket med en bygg- och publiceringskedja (npm för JS-ramverken, NuGet för Blazor).

Använd en huvudlös komponent

Huvudlösa komponenter levereras med semantisk HTML, ARIA och egenskaper – men ingen CSS. Så här ser en Button ut i varje ramverk:

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" }) }}

Använd ett formgivet exempel

Exempelapparna innehåller CSS, rutter och fullständiga demosidor. Det snabbaste sättet att experimentera är att starta exempelappen för SvelteKit, Next, Nuxt, Analog eller Eleventy och titta på demon på /components.

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

Öppna sedan http://localhost:5173 och bläddra på /components.

Formgivning och designtokens

Varje komponent renderas med en enda klass i kebab-case på sitt rotelement. Till exempel renderar <Button> till <button class="button">. Formge det som du vill:

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

Lilys standardfärgpalett (som används i exempelapparna) är:

• Primär: #2563eb
• Fara: #dc2626
• Varning: #f59e0b
• Lyckat: #16a34a
• Sidbakgrund: #f9fafb
• Kortbakgrund: #ffffff

Det här är förslag, inte krav. Ersätt dem med din egen varumärkespalett så hänger Lily glatt med.

Färdiga teman

Vill du inte skriva CSS från grunden? Lily levereras med 57 fristående referensteman i katalogen themes/ . Varje tema är en formatmall som riktar sig mot Lilys klasskrokar – länka den så är du formgiven:

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

Uppsättningen omfattar:

• Offentlig sektor – NHS England, NHS Scotland och NHS Wales (var och en med patientvända och yrkesvända varianter), GOV.UK GDS och U.S. Web Design System.
• Leverantörsinspirerat – Adobe Spectrum, Mozilla Protocol.
• Allmänt bruk – light, dark, nord, dracula, wireframe och trettiotalet fler.

Temaväljare använder :where(...), så din egen CSS vinner alltid på specificitet. Para ihop dem med hjälparen theme-picker nedan för växling vid körning, eller följ temahandledningen.

Inställningshjälpare

Varje ramverk har åtta små väljare, var och en sitt eget lily-design-system-{framework}-{package} -paket (och en picker-bar som sätter ihop dem). Var och en är en huvudlös ikonknapp som öppnar en popup – en listruta, en lista med länkar, ett sökformulär eller (för date-time-picker) en datumväljardialog – inte en inbyggd <select>; är SSR-säker; och levereras utan CSS:

• theme-picker – läser in temaformatmallar vid körning genom att byta en hanterad <link>, sätter data-theme på dokumentet och sparar vid behov i localStorage.
• locale-picker – sätter lang och dir (med automatisk RTL-identifiering) så att ditt i18n-bibliotek kan följa efter; översätter ingenting själv.
• text-size-picker – sätter data-text-size på dokumentet; din CSS kopplar varje värde till textstorlek.
• motion-picker – sätter data-motion på dokumentet, med besökarens inställning för minskad rörelse som utgångspunkt; din CSS och dina skript avgör vad som ska dämpas.
• search-picker – en ikonknapp som öppnar ett sökfält; när du skickar går du till en söksida. Äger en åtgärd, inte en inställning.
• link-picker – en hemikon som öppnar en meny med de sidlänkar din app definierar (Hem, Om oss, Kontakta oss, Integritetspolicy, …). Äger en åtgärd, inte en inställning.
• share-picker – öppnar det inbyggda delningsbladet eller en lista med mål som konsumenten tillhandahåller, plus kopiera URL. Äger en åtgärd, inte en inställning: tillämpar ingenting, sparar ingenting.
• date-time-picker – ett textfält plus en APG-datumväljardialog för ett datum, en tid eller båda. Äger ett formulärvärde, inte en inställning: ISO-strängen går fram och tillbaka till <input type="date">.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker

Svelte-katalogen är den kanoniska referensen; portarna för React, Vue, Angular, HTML, Nunjucks, Web Components och Blazor matchar den kontrakt för kontrakt. Se hjälparhandledningen.

Tillgänglighet

Komponenterna siktar på WCAG 2.2 AAA. De följer dessa mönster:

• Semantiska HTML-element framför generiska <div>s.
• <label for="id"> som kopplar etiketter till indata.
• aria-labelledby / aria-describedby för korsreferenser.
• aria-invalid + aria-errormessage för felstatus.
• role="alert" och aria-live för dynamiskt innehåll.
• aria-pressed, aria-expanded, aria-current för tillstånd.
• Roving tabindex för rutnät.

Fokusindikatorer tillhandahålls avsiktligt av konsumenten – Lily målar aldrig en standardfokusring som krockar med din design. Exempelapparna håller en ren axe-core-baslinje på alla sina rutter.

Internationalisering

Varje etikett, platshållare, felmeddelande och knapptext är en egenskap. Det finns inga hårdkodade strängar. Koppla in valfritt översättningsramverk – Paraglide, i18next, vue-i18n, react-intl, .resx-filer, vad som helst.

För datum, tal och valutor tar komponenterna emot färdigformaterade strängar: du formaterar med Intl.DateTimeFormat / Intl.NumberFormat / ditt föredragna bibliotek och skickar in resultatet.

Hjälparen locale-picker signalerar det valda språket till ditt i18n-bibliotek genom att sätta lang och dir på dokumentets rot.

Testning

Varje ramverks delprojekt levereras med egna tester som använder dess idiomatiska stack:

• HTML: WebDriverIO som kör riktiga webbläsare.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (via Analogs Vite-plugin).
• Nunjucks: Vitest med en renderhjälpare.
• Blazor: bUnit.

Testerna använder endast Vitests inbyggda matchare – aldrig jest-dom -matchare. Det gör testsviterna portabla. Exempelapparna lägger till Playwright-svit från början till slut, tillgänglighetsbaslinjer med axe-core och en svepning över responsiva visningsytor.

AI-agenter

Den här webbplatsen publicerar llms.txt och llms.json i sin rot – en kurerad karta över de viktigaste sidorna, för alla verktyg som följer llms.txt-konventionen.

Det kanoniska monorepot levererar dessutom två Claude Skills: lily-design-system-skill: en generell färdighet som täcker Lilys begrepp, terminologi och sammansättningsmönster för alla som bygger med systemet, och lily-design-system-maintainer-skill, en teknisk färdighet som täcker monorepots layout med obligatoriska filer och verktyg för alla som arbetar med det. Båda ligger i roten av det kanoniska monorepot.

Felsökning

Bidra

Lily är ungt och välkomnar samarbete. De mest användbara bidragen just nu är:

• Nya komponenter (särskilt mönster från etablerade designsystem).
• Nya teman – varje tema är en fristående formatmall, en väl avgränsad första PR.
• Bättre formgivning av exempel – visa vad som är möjligt.
• Översättningar av exempelappens strängar.
• Buggrapporter med en minimal reproduktion.
• Tillgänglighetsgranskningar med skärmläsare och hjälpmedel.

Öppna ärenden och PR på github.com/LilyDesignSystem/lily-design-system.

Community och support

• Frågor och buggrapporter – öppna ett ärende på github.com/LilyDesignSystem/lily-design-system.
• E-post – underhållaren läser joel@joelparkerhenderson.com och välkomnar samarbete, vägledning och återkoppling.
• Speglar – Lily skickas också till Codeberg och GitLab, så att du kan delta från den forge du föredrar.
• Uppförande – projektet följer en standardiserad uppförandekod; var vänlig och utgå från god tro.

Vanliga frågor