Miwiti karo Lily

Instalasi

Lily manggon ing siji monorepo Git, kanthi direktori kanggo pustaka tanpa sirah, paket pembantu, lan aplikasi conto saben framework. Cara paling cepet kanggo nyoba yaiku kloning monorepo lan mbukak pustaka tanpa sirah kanggo tumpukan sampéyan:

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

Pola sing padha makarya kanggo framework liyané:

• @lilydesignsystem/html-headless — ora perlu instalasi; salinen berkas .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

Pustaka tanpa sirah dirancang kanggo dikloning utawa dilebokaké — anggep kode sumber minangka sumber kebeneran lan salinen apa sing sampéyan butuhaké. pembantu preferensi uga dikirim minangka paket sing bisa diinstal kanthi pipeline build lan publikasi (npm kanggo framework JS, NuGet kanggo Blazor).

Nganggo komponèn tanpa sirah

Komponèn tanpa sirah nyedhiyakaké HTML semantik, ARIA, lan properti — nanging ora ana CSS. Iki Button ing saben 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" }) }}

Nganggo conto sing digayani

Aplikasi conto kalebu CSS, rute, lan kaca demo lengkap. Cara paling cepet kanggo ékspérimèn yaiku miwiti aplikasi conto SvelteKit, Next, Nuxt, Analog, utawa Eleventy lan ndeleng demoné ing /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

Banjur bukak http://localhost:5173 lan jelajahi /components.

Gaya lan token desain

Saben komponèn dirender kanthi siji kelas kebab-case ing elemèn oyodé. Contoné, <Button> dirender minangka <button class="button">. Gayani kaya sing sampéyan karepake:

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

Palet warna baku Lily (dienggo ing aplikasi conto) yaiku:

• Utama: #2563eb
• Bebaya: #dc2626
• Pènget: #f59e0b
• Kasil: #16a34a
• Latar kaca: #f9fafb
• Latar kertu: #ffffff

Iki saran, dudu syarat. Ganti nganggo palet mérek sampéyan dhéwé lan Lily melu kanthi bungah.

Tema siap

Ora péngin nulis CSS saka nol? Lily nyedhiyakaké 57 tema rujukan mandiri ing direktori themes/ . Saben siji iku siji stylesheet sing nargetaké pancingan kelas Lily — sambungna lan sampéyan wis digayani:

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

Setèl iki nyakup:

• Sektor umum — NHS England, NHS Scotland, lan NHS Wales (saben siji ing varian kanggo pasien lan praktisi), GOV.UK GDS, lan U.S. Web Design System.
• Kainspirasi vendor — Adobe Spectrum, Mozilla Protocol.
• Tujuan umum — light, dark, nord, dracula, wireframe, lan telung puluhan liyané.

Selektor tema nganggo :where(...), dadi CSS sampéyan dhéwé tansah menang ing spesifisitas. Pasangna karo pembantu theme-picker ing ngisor kanggo ganti nalika mlaku, utawa tututi tutorial tema.

Pembantu preferensi

Saben framework duwé wolung pamilih cilik, saben siji paket lily-design-system-{framework}-{package} dhéwé (lan picker-bar sing nyusun kuwi). Saben siji iku tombol ikon tanpa sirah sing mbukak popup — kothak dhaptar, dhaptar tautan, formulir panelusuran, utawa (kanggo date-time-picker) dialog pamilih tanggal — dudu <select>asli; aman kanggo SSR; lan ora ngirim CSS:

• theme-picker — muat stylesheet tema nalika mlaku kanthi ngganti <link>sing dikelola, nyetèl data-theme ing dokumèn, lan opsional nyimpen kanthi permanèn ing localStorage.
• locale-picker — nyetèl lang lan dir (kanthi deteksi RTL otomatis) supaya pustaka i18n sampéyan bisa nututi; ora nerjemahaké apa waé dhéwé.
• text-size-picker — nyetèl data-text-size ing dokumèn; CSS sampéyan mapakaké saben nilai menyang ukuran font.
• motion-picker — nyetèl data-motion ing dokumèn, diwiwiti saka setelan gerakan dikurangi pengunjung; CSS lan skrip sampéyan sing mutusaké apa sing ditahan.
• search-picker — tombol ikon sing mbukak kolom panelusuran; ngirim bakal menyang kaca panelusuran. Nduwèni aksi, dudu preferensi.
• link-picker — ikon omah sing mbukak menu tautan kaca sing ditetepaké aplikasi sampéyan (Beranda, Babagan Kita, Hubungi Kita, Kabijakan Privasi, …). Nduwèni aksi, dudu preferensi.
• share-picker — mbukak lembar nuduhaké asli utawa dhaptar tujuan sing diwènèhaké konsumen, ditambah nyalin URL. Nduwèni aksi, dudu preferensi: ora nrapaké apa waé, ora nyimpen apa waé.
• date-time-picker — kolom tèks plus dialog pamilih tanggal APG kanggo tanggal, wektu, utawa loro-loroné. Nduwèni nilai formulir, dudu preferensi: string ISO diowahi bolak-balik menyang <input type="date">.

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

Katalog Svelte iku rujukan kanonik; port React, Vue, Angular, HTML, Nunjucks, Web Components, lan Blazor cocog karo kuwi kontrak demi kontrak. Delengen tutorial pembantu.

Aksesibilitas

Komponèn ngarah menyang WCAG 2.2 AAA. Kuwi nututi pola-pola iki:

• Elemèn HTML semantik tinimbang <div>s.
• <label for="id"> umum sing nyambungaké labèl karo input.
• aria-labelledby / aria-describedby kanggo rujukan silang.
• aria-invalid + aria-errormessage kanggo kahanan kesalahan.
• role="alert" lan aria-live kanggo isi dinamis.
• aria-pressed, aria-expanded, aria-current kanggo kahanan.
• Roving tabindex kanggo kisi.

Indikator fokus sengaja diwènèhaké konsumen — Lily ora tau nggambar cincin fokus baku sing bentrok karo desain sampéyan. Aplikasi conto njaga dasar axe-core sing resik ing kabèh rutené.

Internasionalisasi

Saben labèl, placeholder, pesen kesalahan, lan tèks tombol iku properti. Ora ana string permanèn. Sambungna framework terjemahan pilihan sampéyan — Paraglide, i18next, vue-i18n, react-intl, berkas .resx, apa waé.

Kanggo tanggal, angka, lan mata uang, komponèn nampa string sing wis diformat: sampéyan ngformat nganggo Intl.DateTimeFormat / Intl.NumberFormat / pustaka kesenengan sampéyan lan ngirim asilé.

Pembantu locale-picker menehi sinyal lokal sing dipilih marang pustaka i18n sampéyan kanthi nyetèl lang lan dir ing oyod dokumèn.

Tés

Saben subproyèk framework ngirim tés dhéwé nganggo tumpukan idiomatiké:

• HTML: WebDriverIO sing njalanaké browser nyata.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (liwat plugin Vite Analog).
• Nunjucks: Vitest nganggo pembantu render.
• Blazor: bUnit.

Tés nganggo mung matcher bawaan Vitest — ora tau matcher jest-dom . Iki njaga suite tés bisa dipindhah. Aplikasi conto nambahaké suite end-to-end Playwright, dasar aksesibilitas axe-core, lan sapuan viewport responsif.

Agèn AI

Situs iki nerbitaké llms.txt lan llms.json ing oyodé — peta pilihan saka kaca-kaca paling pentingé, kanggo piranti apa waé sing nututi konvènsi llms.txt.

Monorepo kanonik uga ngirim loro Claude Skills: lily-design-system-skill: kaprigelan tujuan umum sing nyakup konsèp, terminologi, lan pola komposisi Lily kanggo sapa waé sing mbangun nganggo sistem, lan lily-design-system-maintainer-skill, kaprigelan teknis sing nyakup tata letak berkas wajib lan piranti monorepo kanggo sapa waé sing makarya ing kono. Loro-loroné ana ing oyod monorepo kanonik.

Pemecahan masalah

Nyumbang

Lily iku enom lan nampa kolaborasi. Sumbangan sing paling migunani saiki yaiku:

• Komponèn anyar (utamané pola saka sistem desain sing wis mapan).
• Tema anyar — saben siji iku siji stylesheet mandiri, PR kapisan sing wangun jelas.
• Gaya conto sing luwih apik — tuduhna apa sing bisa.
• Terjemahan string aplikasi conto.
• Laporan bug kanthi réproduksi minimal.
• Audit aksesibilitas nganggo pembaca layar lan teknologi bantu.

Bukak issue lan PR ing github.com/LilyDesignSystem/lily-design-system.

Komunitas lan dhukungan

• Pitakon lan laporan bug — bukak issue ing github.com/LilyDesignSystem/lily-design-system.
• Email — pangreksa maca joel@joelparkerhenderson.com lan nampa kolaborasi, tuntunan, lan umpan balik.
• Pangilon — Lily uga di-push menyang Codeberg lan GitLab, supaya sampéyan bisa melu saka forge kesenengan sampéyan.
• Prilaku — proyèk iki nututi kode etik standar; dadi ramah, anggepen niat apik.

FAQ