Bermula dengan Lily

Pasang

Lily tinggal dalam satu monorepo Git, dengan direktori bagi setiap perpustakaan tanpa kepala rangka kerja, pakej pembantu dan aplikasi contoh. Cara terpantas mencuba ialah mengklon monorepo dan membuka perpustakaan tanpa kepala untuk tindanan anda:

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

Corak yang sama berfungsi untuk rangka kerja lain:

• @lilydesignsystem/html-headless — tiada pemasangan diperlukan; salin .html fail
• @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

Perpustakaan tanpa kepala direka untuk diklon atau divendor — anggap sumber sebagai punca kebenaran dan salin apa yang anda perlukan. pembantu keutamaan turut disediakan sebagai pakej boleh dipasang dengan saluran binaan dan penerbitan (npm untuk rangka kerja JS, NuGet untuk Blazor).

Gunakan komponen tanpa kepala

Komponen tanpa kepala menyediakan HTML semantik, ARIA dan prop — tetapi tiada CSS. Berikut ialah Button dalam setiap rangka kerja:

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

Gunakan contoh bergaya

Aplikasi contoh termasuk CSS, laluan dan halaman demo penuh. Cara terpantas bereksperimen ialah memulakan aplikasi contoh SvelteKit, Next, Nuxt, Analog atau Eleventy dan melihat demo di /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

Kemudian buka http://localhost:5173 dan layari /components.

Penggayaan dan token reka bentuk

Setiap komponen dipaparkan dengan satu kelas kebab-case pada elemen akarnya. Contohnya, <Button> memaparkan <button class="button">. Gayakan sesuka hati:

.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 Lily lalai (digunakan dalam aplikasi contoh) ialah:

• Utama: #2563eb
• Bahaya: #dc2626
• Amaran: #f59e0b
• Kejayaan: #16a34a
• Latar halaman: #f9fafb
• Latar kad: #ffffff

Ini cadangan, bukan keperluan. Gantikannya dengan palet jenama anda sendiri dan Lily akan menyesuaikan diri dengan senang hati.

Tema siap pakai

Tidak mahu menulis CSS dari kosong? Lily disertakan dengan 57 tema rujukan kendiri dalam direktori themes/ . Setiap satu ialah satu helaian gaya yang menyasarkan cangkuk kelas Lily — pautkan dan anda sudah digayakan:

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

Set ini meliputi:

• Sektor awam — NHS England, NHS Scotland dan NHS Wales (varian untuk pesakit dan pengamal masing-masing), GOV.UK GDS dan U.S. Web Design System.
• Diilhamkan vendor — Adobe Spectrum, Mozilla Protocol.
• Serba guna — light, dark, nord, dracula, wireframe, dan tiga puluhan lagi.

Pemilih tema menggunakan :where(...), jadi CSS anda sendiri sentiasa menang dari segi kekhususan. Pasangkan dengan pembantu theme-picker di bawah untuk penukaran runtime, atau ikuti tutorial tema.

Pembantu keutamaan

Setiap rangka kerja mempunyai lapan pemilih kecil, masing-masing dalam pakej lily-design-system-{framework}-{package} tersendiri (dan picker-bar yang menghimpunkannya). Setiap satu ialah butang ikon tanpa kepala yang membuka popup — kotak senarai, senarai pautan, borang carian, atau (untuk date-time-picker) dialog pemilih tarikh — bukan natif <select>; selamat untuk SSR; dan disertakan tanpa CSS:

• theme-picker — memuatkan helaian gaya tema semasa runtime dengan menukar <link>yang diurus, menetapkan data-theme pada dokumen, dan secara pilihan menyimpan ke localStorage.
• locale-picker — menetapkan lang dan dir (dengan pengesanan RTL automatik) supaya perpustakaan i18n anda boleh mengikutinya; ia sendiri tidak menerjemah.
• text-size-picker — menetapkan data-text-size pada dokumen; CSS anda memetakan setiap nilai kepada saiz fon.
• motion-picker — menetapkan data-motion pada dokumen, bermula daripada tetapan gerakan dikurangkan pelawat; CSS dan skrip anda memutuskan apa yang ditindas.
• search-picker — butang ikon yang membuka medan carian; penghantaran menavigasi ke halaman carian. Memiliki tindakan, bukan keutamaan.
• link-picker — ikon rumah yang membuka menu pautan halaman yang ditakrifkan aplikasi anda (Utama, Perihal Kami, Hubungi Kami, Dasar Privasi, …). Memiliki tindakan, bukan keutamaan.
• share-picker — membuka helaian kongsi natif atau senarai destinasi yang dibekalkan pengguna, ditambah salin-URL. Memiliki tindakan, bukan keutamaan: tidak menggunakan apa-apa, tidak menyimpan apa-apa.
• date-time-picker — medan teks ditambah dialog pemilih tarikh APG untuk tarikh, masa, atau kedua-duanya. Memiliki nilai borang, bukan keutamaan: rentetan ISO berulang-alik ke <input type="date">.

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

Katalog Svelte ialah rujukan kanonik; port React, Vue, Angular, HTML, Nunjucks, Web Components dan Blazor sepadan dengannya kontrak demi kontrak. Lihat tutorial pembantu.

Kebolehcapaian

Komponen menyasarkan WCAG 2.2 AAA. Mereka mengikut corak ini:

• Elemen HTML semantik berbanding generik <div>s.
• <label for="id"> memaut label kepada input.
• aria-labelledby / aria-describedby untuk rujukan silang.
• aria-invalid + aria-errormessage untuk keadaan ralat.
• role="alert" dan aria-live untuk kandungan dinamik.
• aria-pressed, aria-expanded, aria-current untuk keadaan.
• Roving tabindex untuk grid.

Penunjuk fokus sengaja dibekalkan oleh pengguna — Lily tidak pernah melukis gelang fokus lalai yang bertembung dengan reka bentuk anda. Aplikasi contoh mengekalkan garis dasar axe-core yang bersih merentas laluan mereka.

Pengantarabangsaan

Setiap label, pemegang tempat, mesej ralat dan teks butang ialah prop. Tiada rentetan dikodkan keras. Masukkan rangka kerja terjemahan pilihan anda — Paraglide, i18next, vue-i18n, react-intl, fail .resx, apa sahaja.

Untuk tarikh, nombor dan mata wang, komponen menerima rentetan yang telah diformat: anda memformat dengan Intl.DateTimeFormat / Intl.NumberFormat / perpustakaan pilihan anda dan menghantar hasilnya.

Pembantu locale-picker memberi isyarat lokal yang dipilih kepada perpustakaan i18n anda dengan menetapkan lang dan dir pada akar dokumen.

Ujian

Setiap subprojek rangka kerja menghantar ujiannya sendiri menggunakan tindanan idiomatiknya:

• HTML: WebDriverIO menjalankan pelayar sebenar.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (melalui pemalam Analog Vite).
• Nunjucks: Vitest dengan pembantu paparan.
• Blazor: bUnit.

Ujian menggunakan hanya pemadan terbina dalam Vitest — tidak pernah jest-dom pemadan. Ini memastikan suite ujian mudah alih. Aplikasi contoh menambah suite hujung-ke-hujung Playwright, garis dasar kebolehcapaian axe-core dan sapuan viewport responsif.

Ejen AI

Tapak ini menerbitkan llms.txt dan llms.json pada akarnya — peta terkurasi halaman terpentingnya, untuk mana-mana alat yang mengikuti konvensyen llms.txt.

Monorepo kanonik turut menghantar dua Claude Skills: lily-design-system-skill, kemahiran serba guna yang meliputi konsep, istilah dan corak gubahan Lily untuk sesiapa yang membina dengan sistem ini, dan lily-design-system-maintainer-skill, kemahiran teknikal yang meliputi susun atur fail wajib dan perkakasan monorepo untuk sesiapa yang bekerja padanya. Kedua-duanya terletak pada akar monorepo kanonik.

Penyelesaian masalah

Menyumbang

Lily masih muda dan mengalu-alukan kerjasama. Sumbangan paling berguna sekarang ialah:

• Komponen baharu (terutamanya corak daripada sistem reka bentuk yang mantap).
• Tema baharu — masing-masing satu helaian gaya kendiri, PR pertama yang berskop baik.
• Penggayaan contoh yang lebih baik — tunjukkan apa yang mungkin.
• Terjemahan rentetan aplikasi contoh.
• Laporan pepijat dengan pengeluaran semula minimum.
• Audit kebolehcapaian dengan pembaca skrin dan teknologi bantuan.

Buka isu dan PR di github.com/LilyDesignSystem/lily-design-system.

Komuniti dan sokongan

• Soalan dan laporan pepijat — buka isu di github.com/LilyDesignSystem/lily-design-system.
• E-mel — penyelenggara membaca joel@joelparkerhenderson.com dan mengalu-alukan kerjasama, bimbingan dan maklum balas.
• Cermin — Lily turut ditolak ke Codeberg dan GitLab, supaya anda boleh mengambil bahagian dari forge pilihan anda.
• Tatakelakuan — projek ini mengikuti kod tatakelakuan standard; berbaik-baiklah, anggap niat baik.

Soalan lazim