Dalleth gans Lily

Stallya

Lily a trig yn unn monorepo Git, gans kuntelleth rag lyverva heb pen, pakkyow gweresoryon, hag app ensampel pub framwyth. An fordh kyns dhe assaya yw klonya an monorepo hag igeri an lyverva heb pen rag dha stakk:

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

An keth patrom a oberow rag an framwyth erell:

• @lilydesignsystem/html-headless — heb othom stallya; kopiewgh .html restrennow
• @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

An lyvervaow heb pen yw dyllys dhe vos klonys po vendorys — kemerewgh an fenten avel fenten an gwiryonedh ha kopiewgh an pyth a'n jeves othom. gweresoryon dewisyow a dheu ynwedh avel pakkyow stallys gans fordh-drehevel ha fordh-dyllans (npm rag framwyth JS, NuGet rag Blazor).

Devnydhyewgh darn heb pen

Darnow heb pen a re HTML a dhiswelyans, ARIA, ha perthynasow — mes heb CSS. Omma yw Button yn pub framwyth:

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

Devnydhyewgh ensampel stylys

An appys ensampel a'n jeves CSS, fordhow, ha folennow dyskwedhyans kowl. An fordh vyttha dhe assaya yw dalleth an app ensampel SvelteKit, Next, Nuxt, Analog, po Eleventy ha gweles an dyskwedhyans orth /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

Ena igorewgh http://localhost:5173 ha whelewgh /components.

Stylyans ha tokenys dyllans

Pub darn a vydh dyskwedhys gans unn klass kebab-case war y elven wreydh. Rag ensampel, <Button> a dhyskwedh <button class="button">. Stylyewgh herwydh dha vodh:

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

Palet liw Lily ragosodhys (devnydhys y'n appys ensampel) yw:

• Kynsa: #2563eb
• Peryl: #dc2626
• Gwarnyans: #f59e0b
• Sewena: #16a34a
• Dadhel folen: #f9fafb
• Dadhel kard: #ffffff

Hemma yw arghyow, nyns yw othomow. Chanjewgh anedha gans dha balet marghek dha honan ha Lily a dheu yn lowen.

Tebelyow parys

Na vynnewgh skrifa CSS dhiworth nagonan? Lily a dheu gans 57 tebel dre-honan kehevelys y'n kuntelleth themes/ . Pub onan yw unn folen-stil a hwel krogow klass Lily — kevrewgh hi ha ty yw stylys:

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

An set a wra kuntell:

• Sektour poblek — NHS England, NHS Scotland, ha NHS Wales (versyonow rag klavyoryon ha gwithyoryon pub onan), GOV.UK GDS, ha'n U.S. Web Design System.
• Enspyrys gans gwerther — Adobe Spectrum, Mozilla Protocol.
• Amkan kenedhlek — light, dark, nord, dracula, wireframe, ha deg ha trigans moy.

Dewisyoryon tebel a wra devnydh a :where(...), rag henna dha CSS dha honan a wayn pub prys war an arbennigrwydh. Junyewgh anedha gans an gweresor theme-picker a-woeles rag chanj y'n termyn-dyrghas, po sewyewgh an dyskans tebelyow.

Gweresoryon dewisyow

Pub framwyth a'n jeves eth dewisyer byghan, pub onan y'y bakkya dha honan lily-design-system-{framework}-{package} (ha picker-bar a vynn aga junya). Pub onan yw botton-ikon heb pen a idzhek popup — listbox, rol kevrennow, furv whelas, po (rag date-time-picker) kowtys dewis-deiz — nyns yw genesek <select>; yw diogel dhe SSR; ha dheu heb CSS:

• theme-picker — a gar folennow-stil tebel y'n termyn-dyrghas dre chanjya <link>governys, a sett data-theme war an skrif, ha yn kuntellys a with dhe localStorage.
• locale-picker — a sett lang ha dir (gans ertheg RTL awtomatek) may hyll dha lyverva i18n sewya; ny wra treylyans yn honan.
• text-size-picker — a sett data-text-size war an skrif; dha CSS a vapp pub gwerth dhe vyns-lytherenn.
• motion-picker — a sett data-motion war an skrif, ow talleth dhiworth settyans gwayans-lehes an gwelyer; dha CSS ha skrypow a dhewis pyth a vydh dyslywys.
• search-picker — botton-ikon a idzhek hwel-whelas; danvon a dhre dhe folen whelas. A'n jeves gwrians, nyns yw dewis.
• link-picker — ikon-chi a idzhek menu a gevrennow folen a styr dha app (Tre, A-dro dhyn, Kestewgh genen, Polisi Privetter, …). A'n jeves gwrians, nyns yw dewis.
• share-picker — a idzhek an folen-rannans genesek po rol-pennow-lyes dhiworth devnydhyer, ha kopi an URL. A'n jeves gwrians, nyns yw dewis: ny wra gul neppyth, ny with neppyth.
• date-time-picker — hwel-tekst ha kowtys dewis-deiz APG rag deiz, termyn, po an dhew. A'n jeves gwerth furv, nyns yw dewis: an linenn ISO a dhreyl dhe <input type="date">.

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

An rolyans Svelte yw an dhogenn kenedhlek; porthow React, Vue, Angular, HTML, Nunjucks, Web Components, ha Blazor a gessenva orto kevambos orth kevambos. Gwelewgh an dyskans gweresoryon.

Hedhesadewder

Darnow a hwel WCAG 2.2 AAA. Y a sew an patromow ma:

• Elvennow HTML a dhiswelyans dres kenedhlek <div>s.
• <label for="id"> ow kevrewi lavellow orth hwelyow.
• aria-labelledby / aria-describedby rag kesresegyansow.
• aria-invalid + aria-errormessage rag stadys gwall.
• role="alert" ha aria-live rag dalgh kevrennus.
• aria-pressed, aria-expanded, aria-current rag stad.
• Roving tabindex rag grydhow.

Dyskwedhoryon fokus yw arbennik provyes gans an devnydhyer — Lily ny wra bythkweth peynta kylgh-fokus ragosodhys a rydh gans dha dyllans. An appys ensampel a with linenn-selys axe-core glan dres aga fordhow.

Ynter-ranngeneledhegeth

Pub lavell, gwithyer-le, messaj wall, ha tekst botton yw perthynas. Nyns eus linennow kowl yn koodh. Gorrewgh dha framwyth treylyans dewisys — Paraglide, i18next, vue-i18n, react-intl, restrennow .resx, pubtra.

Rag deiziow, niverow, ha mona, an darnow a gemmer linennow furvys a-rag: ty a furv gans Intl.DateTimeFormat / Intl.NumberFormat / dha lyverva dewisys ha passya an sewyans.

An locale-picker gweresor a sinyas an yeth dewisys dhe'th lyverva i18n dre settya lang ha dir war wreydh an skrif.

Previ

Pub isravel framwyth a dhanvon y brevow y honan ow ura y stakk usys:

• HTML: WebDriverIO ow kerdhes gwiaskodhoryon gwir.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (dre'n plugin Analog Vite).
• Nunjucks: Vitest gans gweresor dyskwedhes.
• Blazor: bUnit.

Previow a wra devnydh a unnik matchyoryon yn-bos Vitest — bythkweth jest-dom matchyoryon. Hemma a with an rollow previ hewejyel. An appys ensampel a geworr rollow Playwright pennhwedh-dhe-bennhwedh, linennow-selys hedhesadewder axe-core, ha skubyans viewport gorthebus.

Ahentys AI

An gwiasva ma a dhelergh llms.txt ha llms.json orth y wreydh — mappa dewisys a'y folennow moyha a brys, rag toul vyth a sew an usadow llms.txt.

An monorepo kenedhlek a dhanvon ynwedh dew Claude Skills: lily-design-system-skill, skians kenedhlek a dhalgh dyskansow, geryow-ober, ha patromow kesstrewi Lily rag peub a dhrehev gans an system, ha lily-design-system-maintainer-skill, skians teknyk a dhalgh gorfarth restrennow ilvyn ha toulys an monorepo rag peub a ober warnodho. An dhew a drig orth gwreydh an monorepo kenedhlek.

Kudynnow

Kevrenna

Lily yw yowynk ha a dhynnergh kesoberi. An gweres moyha poesek lemmyn yw:

• Darnow nowydh (arbennik patromow dhiworth systemow dyllans selys).
• Tebelyow nowydh — pub onan yw unn folen-stil dre-honan, kynsa PR kowl-ranngys.
• Stylyans ensampel gwell — diskwedhewgh pyth yw possybyl.
• Treylyansow a linennow an appys ensampel.
• Derivasow gwall gans ynnyas mynnys-leha.
• Awditow hedhesadewder gans skrin-redyoryon ha teknologieth gweres.

Igorewgh materow ha PRs orth github.com/LilyDesignSystem/lily-design-system.

Kemmynedh ha skoodhyans

• Govynnow ha derivasow gwall — igorewgh mater orth github.com/LilyDesignSystem/lily-design-system.
• Ebost — an gwithyer a red joel@joelparkerhenderson.com ha a dhynnergh kesoberi, hembronk, ha bolla.
• Gwydrow — Lily yw ynwedh gwrys push dhe Codeberg ha GitLab, may hyllowgh kemeres rann dhiworth an forge a garewgh.
• Kerdhes — an raglen a sew kodh kerdhes ynbann; bedhewgh hegar, gesewgh fydh da.

FAQ