Kom i gang med Lily

Installation

Lily bor i ét Git-monorepo med en mappe til hvert frameworks hovedløse bibliotek, hjælperpakker og eksempelapp. Den hurtigste måde at prøve det på er at klone monorepoet og åbne det hovedløse bibliotek til din stak:

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

Det samme mønster virker for de andre frameworks:

• @lilydesignsystem/html-headless – ingen installation nødvendig; kopiér .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 hovedløse biblioteker er udformet til at blive klonet eller indlemmet – betragt kildekoden som sandhedskilden og kopiér det, du har brug for. præferencehjælperne leveres desuden som installerbare pakker med en bygge- og udgivelsespipeline (npm til JS-frameworks, NuGet til Blazor).

Brug en hovedløs komponent

Hovedløse komponenter leveres med semantisk HTML, ARIA og props – men ingen CSS. Her er en Button i hvert 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" }) }}

Brug et stilet eksempel

Eksempelapps indeholder CSS, ruter og fulde demosider. Den hurtigste måde at eksperimentere på er at starte eksempelappen til SvelteKit, Next, Nuxt, Analog eller Eleventy og se demoen 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

Åbn derefter http://localhost:5173 og gennemse /components.

Stilarter og designtokens

Hver komponent gengives med én enkelt kebab-case-klasse på sit rodelement. For eksempel gengiver <Button> som <button class="button">. Stil det, som du vil:

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

Lilys standardfarvepalet (brugt i eksempelapps) er:

• Primær: #2563eb
• Fare: #dc2626
• Advarsel: #f59e0b
• Succes: #16a34a
• Sidebaggrund: #f9fafb
• Kortbaggrund: #ffffff

Det er forslag, ikke krav. Erstat dem med din egen brandpalet, så følger Lily gerne med.

Færdige temaer

Vil du ikke skrive CSS fra bunden? Lily leveres med 57 selvstændige referencetemaer i mappen themes/ . Hvert er ét typografiark, der retter sig mod Lilys klassekroge – link det, og du er stilet:

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

Sættet omfatter:

• Offentlig sektor – NHS England, NHS Scotland og NHS Wales (hver med varianter til patienter og fagpersoner), GOV.UK GDS og U.S. Web Design System.
• Inspireret af leverandører – Adobe Spectrum, Mozilla Protocol.
• Almen brug – light, dark, nord, dracula, wireframe og tredive-og-lidt flere.

Temaselektorer bruger :where(...), så din egen CSS altid vinder på specificitet. Par dem med theme-picker -hjælperen nedenfor til skift under kørsel, eller følg temavejledningen.

Præferencehjælpere

Hvert framework har otte små vælgere, hver sin egen lily-design-system-{framework}-{package} -pakke (og en picker-bar der samler dem). Hver er en hovedløs ikonknap, der åbner en popup – en listeboks, en liste med links, en søgeformular eller (for date-time-picker) en datovælgerdialog – ikke en indbygget <select>; er SSR-sikker; og leveres uden CSS:

• theme-picker – indlæser tema-typografiark under kørsel ved at skifte et administreret <link>, sætter data-theme på dokumentet og gemmer eventuelt i localStorage.
• locale-picker – sætter lang og dir (med automatisk RTL-registrering), så dit i18n-bibliotek kan følge med; oversætter ikke selv noget.
• text-size-picker – sætter data-text-size på dokumentet; din CSS knytter hver værdi til en skriftstørrelse.
• motion-picker – sætter data-motion på dokumentet, med udgangspunkt i den besøgendes indstilling for reduceret bevægelse; din CSS og dine scripts afgør, hvad der undertrykkes.
• search-picker – en ikonknap, der åbner et søgefelt; afsendelse navigerer til en søgeside. Ejer en handling, ikke en præference.
• link-picker – et hjemikon, der åbner en menu med de sidelinks, din app definerer (Hjem, Om os, Kontakt os, Privatlivspolitik, …). Ejer en handling, ikke en præference.
• share-picker – åbner det indbyggede delingsark eller en liste over destinationer leveret af forbrugeren, plus kopiér URL. Ejer en handling, ikke en præference: anvender intet, gemmer intet.
• date-time-picker – et tekstfelt plus en APG-datovælgerdialog til en dato, et tidspunkt eller begge dele. Ejer en formularværdi, ikke en præference: ISO-strengen omsættes frem og tilbage til <input type="date">.

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

Svelte-kataloget er den kanoniske reference; portene til React, Vue, Angular, HTML, Nunjucks, Web Components og Blazor matcher det kontrakt for kontrakt. Se hjælpervejledningen.

Tilgængelighed

Komponenterne sigter mod WCAG 2.2 AAA. De følger disse mønstre:

• Semantiske HTML-elementer frem for generiske <div>s.
• <label for="id"> der knytter etiketter til input.
• aria-labelledby / aria-describedby til krydsreferencer.
• aria-invalid + aria-errormessage til fejltilstande.
• role="alert" og aria-live til dynamisk indhold.
• aria-pressed, aria-expanded, aria-current til tilstand.
• Roving tabindex til gitre.

Fokusindikatorer leveres bevidst af forbrugeren – Lily tegner aldrig en standardfokusring, der strider mod dit design. Eksempelapps holder en ren axe-core-baseline på alle deres ruter.

Internationalisering

Hver etiket, pladsholder, fejlmeddelelse og knaptekst er en prop. Der er ingen hårdkodede strenge. Sæt det oversættelsesframework ind, du foretrækker – Paraglide, i18next, vue-i18n, react-intl, .resx-filer, hvad som helst.

For datoer, tal og valutaer modtager komponenterne færdigformaterede strenge: du formaterer med Intl.DateTimeFormat / Intl.NumberFormat / dit foretrukne bibliotek og sender resultatet videre.

Hjælperen locale-picker signalerer det valgte sprog til dit i18n-bibliotek ved at sætte lang og dir på dokumentroden.

Test

Hvert frameworks delprojekt leveres med egne tests, der bruger dets idiomatiske stak:

• HTML: WebDriverIO, der kører rigtige browsere.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (via Analog Vite-plugin'et).
• Nunjucks: Vitest med en gengivelseshjælper.
• Blazor: bUnit.

Tests bruger kun Vitests indbyggede matchere – aldrig jest-dom -matchere. Det holder testsuiterne bærbare. Eksempelapps tilføjer Playwright-ende-til-ende-suiter, axe-core-tilgængelighedsbaselines og en gennemgang af responsive viewporte.

AI-agenter

Dette websted udgiver llms.txt og llms.json i sin rod – et kurateret kort over de vigtigste sider, til ethvert værktøj, der følger llms.txt-konventionen.

Det kanoniske monorepo leverer desuden to Claude Skills: lily-design-system-skill: en alment anvendelig skill, der dækker Lilys begreber, terminologi og sammensætningsmønstre for alle, der bygger med systemet, og lily-design-system-maintainer-skill, en teknisk skill, der dækker monorepoets layout af påkrævede filer og værktøjer for alle, der arbejder på det. Begge ligger i roden af det kanoniske monorepo.

Fejlfinding

Bidrag

Lily er ungt og byder samarbejde velkommen. De mest nyttige bidrag lige nu er:

• Nye komponenter (især mønstre fra etablerede designsystemer).
• Nye temaer – hvert er ét selvstændigt typografiark, en velafgrænset første PR.
• Bedre eksempelstil – vis, hvad der er muligt.
• Oversættelser af eksempelappens strenge.
• Fejlrapporter med en minimal gengivelse.
• Tilgængelighedsrevisioner med skærmlæsere og hjælpeteknologi.

Opret issues og PR'er på github.com/LilyDesignSystem/lily-design-system.

Fællesskab og support

• Spørgsmål og fejlrapporter – opret en issue på github.com/LilyDesignSystem/lily-design-system.
• E-mail – vedligeholderen læser joel@joelparkerhenderson.com og byder samarbejde, vejledning og feedback velkommen.
• Spejle – Lily pushes også til Codeberg og GitLab, så du kan deltage fra den forge, du foretrækker.
• Adfærd – projektet følger en standardadfærdskodeks; vær venlig og antag god tro.

FAQ