# Agriculture tasarım sistemi

## Agriculture tasarım sistemi Arayüz Önizlemesi

İki ön koşul denetimini tamamlayın, kilidi açılan incelemeyi başlatın ve yerel örneği sıfırlayın.

## Agriculture tasarım sistemi Tasarım Referansı

AgDS resmî belirteç/bileşen belgeleri ve @ag.ds-next/react 1.35.4 meta verileri. Önizleme, belgelenmiş HTML/CSS yorumudur; gerçek React içe aktarımları ayrıca sağlanır.

### Tipografi rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| xs / sm / md / lg | 14 / 16 / 20 / 24px | Küçükten büyüğe kararlı roller. |
| xl mobile → desktop | 28 → 32px | Duyarlı başlık rolü. |
| xxl / xxxl mobile → desktop | 32 → 40px / 40 → 48px | Büyük başlık rolleri. |
| Body family | System UI with Helvetica/Arial fallbacks | Web yazı tipi indirmesi gerekmez. |
### Aralık değerleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| 0.25 / 0.5 / 0.75 / 1 | 4 / 8 / 12 / 16px | İlgili içerik ve kompakt iç boşluk. |
| 1.5 / 2 / 3 / 4 | 24 / 32 / 48 / 64px | Sütunlar, alanlar, gruplar ve bölümler. |
| Form field gap | 2 = 32px | FormStack rolü. |
| Fieldset/group gap | 3 = 48px | Soru gruplarını ayırın. |
### Ekran genişliği eşikleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| xs / sm / md | 0 / 576 / 768px | Önce mobil için tasarlanmış duyarlı nesne anahtarları. |
| lg / xl / xxl | 992 / 1200 / 1600px | Daha geniş görünüm alanı eşikleri. |
### Açık renk rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| text / muted | #313131 / #626262 | Birincil ve destekleyici içerik. |
| action | #00558b | Etkileşimli öğeler. |
| body / bodyAlt | #ffffff / #ebebeb | Eşleştirilmiş yüzey rolleri. |
| border / borderMuted | #808080 / #d3d3d3 | Gerekli denetim kenarlığı ile dekoratif ayırıcı arasındaki fark. |
## Agriculture tasarım sistemi Eksiksiz Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Agriculture tasarım sistemi Core ve Emotion

### Gerçek sağlayıcıyla başlayın

> AgDS, Emotion ile stillendirilen bir React kütüphanesidir. Core, uygulamayı sarar ve sıfırlama stillerini, CSS değişkenlerini ve tema yapılandırmasını sağlar. Seçilen tema içe aktarımı @ag.ds-next/react/ag-branding içinden gelir; Core’dan ayrıdır ve her bileşene eklenen uydurma bir sağlayıcı özelliği değildir.

Bağımsız örnek, belgelenmiş belirteçlerin ve görev durumlarının açıkça belirtilmiş bir HTML/CSS yorumudur. React kütüphanesini çalıştırdığını iddia etmez. Durum makinesi, bağımlılık davranışını incelemek için kullanışlıdır; eksiksiz React örneği ise uygulama için gerçek bileşen yolunu sunar.

Destekleyici belirtimi okuyun

## Agriculture tasarım sistemi Sistem yazı tipleri ve ölçeği

### Yazı tipi indirmeden okunabilir

AgDS; platform arayüzü yazı tipi, Helvetica ve Arial yedeklerini içeren bir sistem yazı tipi yığını kullanır. Belgelenmiş yazı tipi ölçeği xs 14px, sm 16px, md 20px ve lg 24px değerlerinden oluşur. Daha büyük roller mobilde değişir: xl 28→32px, xxl 32→40px ve xxxl 40→48px.

Satır yükseklikleri, tipografi altyapısı boyunca 4px ızgarasına hizalanır. Her yazı tipi için gelişigüzel bir oran çarpmak yerine bileşenin fontSize ve lineHeight rollerini kullanın. Önizlemede sm gövde boyutu, mobilde 32px ve daha geniş görünüm alanlarında 40px başlık kullanılır; yazı tipi indirilmez.

Destekleyici belirtimi okuyun

## Agriculture tasarım sistemi Aralık ve duyarlı özellikler

### Sayılar rem tabanlı belirteçleri ifade eder

AgDS’de 1.5 aralık değeri, standart kök boyutunda 24px anlamına gelir; 1.5px anlamına gelmez. Belgelenmiş aralık dizisi 0.25=4px, 0.5=8px, 0.75=12px, 1=16px, 2=32px ve 3=48px değerlerini içerir. FormStack alanlar arasındaki boşluk için 2’yi, daha büyük alan kümeleri ise 3’ü kullanır.

Duyarlı özellikler, adlandırılmış kesme noktası nesnelerini kabul eder. Box padding={{xs:1,md:3}} değeri 16px ile başlar ve 768px’te 48px’e çıkar. Atlanmış ara anahtarlar, önceki değeri devralır. Bu yaklaşım, birbirinden bağımsız CSS geçersiz kılmalar dizisinden daha açıktır.

Destekleyici belirtimi okuyun

## Agriculture tasarım sistemi Ön plan rengi arka plana göre belirlenir

### Açık ve koyu rolleri birlikte kullanın

Renk referansı; eşleştirilmiş ön plan, arka plan, kenarlık ve sistem rollerini tanımlar. Açık renkli metin #313131, soluk metin #626262 ve eylem rengi #00558b’dir. Koyu palet üzerinde eylem rengi #9ee8ff olur. Eylem rengi etkileşimi belirtir; açılamayan bir görevde gelişigüzel dekorasyon amacıyla kullanılmamalıdır.

Önizleme açık paleti, altı çizili mavi eylem bağlantısıyla birlikte kullanır. Engellenmiş işler, tıklamayı sessizce reddeden mavi bir denetim yerine açıklama içeren metin olarak gösterilir. Tamamlanma, sözcüklerle ve yeşil bir görünümle ifade edilir; durum hiçbir zaman yalnızca renkle belirtilmez.

Destekleyici belirtimi okuyun

## Agriculture tasarım sistemi TaskList bir gezinme bileşenidir

### Kullanılabilirliği tamamlanma durumundan ayırın

Gerçek TaskList, öğeleri ve isteğe bağlı bir sıralı durumunu kabul eder. Her öğenin bir etiketi ve durumu vardır; href gezinme sağlar, href belirtilmezse onClick düğmesi kullanılabilir. Kullanılabilir durum değerleri todo, doing, done, doneRecently, blocked ve notRequired’dır.

Birden çok görev içeren işlemlerde, özellikle oturumlar arasında devam eden çalışmalarda bu yapıyı kullanın. Tek alan için görev listesi gerekmez. Örnekte ürün ve rota hazırlığı ayrı ön koşullardır; inceleme öğesi, ikisi de tamamlanana kadar kullanılamaz. Bu, yerel bir gösterim kuralıdır; içe aktarma uygunluğuna ilişkin bir karar değildir.

- todo, görevin başlatılabileceği anlamına gelir.

- blocked, ön koşullar nedeniyle görevin başlatılamayacağı anlamına gelir; nedeni belirtin.

- notRequired, görevin artık geçerli olmadığı anlamına gelir; tamamlanmış olmaktan farklıdır.

Destekleyici belirtimi okuyun

## Agriculture tasarım sistemi Bağımlılıklar ve son çalışmalar

### Durum rozeti bir kuralı uygulamaz

Uygulama, incelemenin başlayıp başlayamayacağını iki tamamlanma değerine göre hesaplar. Rozet etiketini değiştirmek yeterli değildir: etkinleştirme işleyicisi de aynı kuralı uygulamalıdır. Örnekteki kullanılamayan inceleme öğesi etkin bir bağlantı değildir. Bir ön koşul tamamlandığında sayaç güncellenir ve incelemenin kilidi yalnızca iki ön koşul da karşılandığında açılır.

Belgelenmiş doneRecently durumu, listeye dönüldükten sonra gösterilen geçici bir geri bildirimdir. Önizleme, az önce tamamlanan bir öğeyi kısa süreyle vurgular ve ardından tamamlandı durumuna geçirir. Sıfırlama, ön koşul durumunu geri yükler; böylece geçiş, sunucu veya hesap olmadan yinelenebilir.

Destekleyici belirtimi okuyun

## Agriculture tasarım sistemi Görev listesinin yanında bağlam

### Örnek kaydı görünür tutun

Görevlerin üzerindeki kompakt özet, kurgusal kaydı, ürünü ve referansı tanımlar. Bu nitelikler tek bir kaydı açıkladığından tanım listesi uygundur. React uygulamasında SummaryList, SummaryListItem, SummaryListItemTerm ve SummaryListItemDescription belgelenmiş eşdeğeri sağlar.

Etkin hazırlık paneli, görev listesinin altında normal akışta kalır. Bu gösterimde tamamlanmanın ne anlama geldiğini açıklar ve ardından bilinçli bir onay sunar. Panel açıldığında başlığı odağı alır; tamamlanınca odak liste başlığına döner. Panel, kanıt yüklediği, lisansı doğruladığı veya beyan gönderdiği izlenimini vermez.

Destekleyici belirtimi okuyun

## Agriculture tasarım sistemi İstemci ve sunucu kurulumu

### Somut bir işleme yolu seçin

Mevcut istemci tarafında oluşturulan bir React uygulamasında @ag.ds-next/react’i React ve Emotion eş bağımlılıklarıyla yükleyin; ardından burada gösterilen Core bileşimini kullanın. Tahmine dayalı bir genel CSS dosyası gerekmez: kütüphane, Emotion ile stiller oluşturur.

Next.js App Router, sunucu tarafında işleme sırasında Emotion stillerini toplamak ve eklemek için resmî RootStyleRegistry entegrasyonunu gerektirir. Belgelerde bu kayıt bileşeni ve bir Core sarmalayıcısı sunulur. Yalnızca istemci tarafında çalışan bir örnek, sunucu tarafında işlemenin doğruluğunu kanıtlamaz; bu nedenle bağlantısı verilen kayıt bileşenini bu ayrı entegrasyon yolunun bir parçası olarak değerlendirin.

1. React paketini ve Emotion bağımlılıklarını yükleyin.

2. Uygulamayı Core ve seçilen temayla sarın.

3. TaskList öğelerini uygulama durumundan oluşturun ve bağımlılıkları işleyicilerde uygulayın.

4. Sunucu tarafında işleme için belgelenen stil kayıt bileşenini entegre edin ve hidratasyonu denetleyin.

Destekleyici belirtimi okuyun

## Agriculture tasarım sistemi Bileşen Örnekleri

### Core, duyarlı Box ve gerçek bir TaskList

Bağımlılıklara duyarlı yerel duruma sahip gerçek bir React bileşimi; gezinme yer tutucusu yoktur.

```
import { useState } from 'react';
import { Core } from '@ag.ds-next/react/core';
import { theme } from '@ag.ds-next/react/ag-branding';
import { Box } from '@ag.ds-next/react/box';
import { TaskList } from '@ag.ds-next/react/task-list';

export default function PreparationTasks() {
  const [checked, setChecked] = useState(false);
  const [reviewed, setReviewed] = useState(false);
  return <Core theme={theme}>
    <Box padding={{ xs: 1, md: 3 }}>
      <TaskList ordered items={[
        { label: 'Check the example commodity',
          status: checked ? 'done' : 'todo',
          onClick: () => setChecked(true) },
        { label: 'Review the preparation record',
          status: reviewed ? 'done' : checked ? 'todo' : 'blocked',
          message: checked ? undefined : 'Complete the commodity check first',
          onClick: () => { if (checked) setReviewed(true); } }
      ]} />
    </Box>
  </Core>;
}
```

Kod referansı

### Tek bir kaydın özeti

Adlandırılmış değerler için gerçek SummaryList bileşimini kullanın.

```
import { SummaryList, SummaryListItem, SummaryListItemTerm,
  SummaryListItemDescription } from '@ag.ds-next/react/summary-list';
<SummaryList>
  <SummaryListItem>
    <SummaryListItemTerm>Example reference</SummaryListItemTerm>
    <SummaryListItemDescription>PREP-1042</SummaryListItemDescription>
  </SummaryListItem>
</SummaryList>
```

Kod referansı

### Eksiksiz bağımsız örnek

Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AgDS task dependencies</title><style>*{box-sizing:border-box}body{margin:0;color:#313131;font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}main{max-width:62rem;padding:48px 24px;margin:auto}h1{font-size:40px;line-height:1.2;margin:16px 0 24px}h2{font-size:24px;line-height:1.3}header{border-bottom:4px solid #00558b;padding-bottom:24px}.meta{display:flex;flex-wrap:wrap;gap:24px}dt{font-weight:bold}dd{margin:4px 0 0}.tasks{padding:0;list-style:none;margin:24px 0}.task{padding:24px 0;border-bottom:1px solid #d3d3d3;display:grid;grid-template-columns:1fr auto;gap:8px 24px}.task button{background:none;border:0;padding:0;text-decoration:underline;color:#00558b;font-family:inherit;font-size:18px;font-weight:700;line-height:1.5;text-align:left;cursor:pointer}.task p{grid-column:1/-1;margin:0;color:#626262}.status{font-size:14px;border:1px solid #808080;padding:2px 8px;align-self:start;white-space:nowrap}.task[data-state=doneRecently]{background:#e5fff6}.task[data-state=done] .status,.task[data-state=doneRecently] .status{color:#00754e}.task[data-state=blocked]{color:#626262}.panel{padding:24px;background:#f5f5f5;border-left:4px solid #00558b}.panel h2{margin-top:0}.action{font-family:inherit;font-size:16px;font-weight:700;line-height:1.5;background:#00558b;color:#fff;border:2px solid #00558b;padding:10px 16px;cursor:pointer}.reset{font:inherit;padding:10px 16px;background:white;border:2px solid #00558b;color:#00558b;margin-top:24px}button:focus-visible,h2:focus{outline:3px solid #9263de;outline-offset:4px}small{display:block;color:#626262;margin-top:24px;font-size:14px}[hidden]{display:none!important}@media(max-width:767px){main{padding:24px 16px}h1{font-size:32px}.task{grid-template-columns:1fr}.status{justify-self:start}.meta{gap:16px}.panel{padding:16px}}
</style><main><header><p>AGDS PATTERN · FICTIONAL PREPARATION RECORD</p><h1>Prepare an example consignment</h1><dl class="meta"><div><dt>Reference</dt><dd>PREP-1042</dd></div><div><dt>Example commodity</dt><dd>Dried botanical samples</dd></div><div><dt>Service mode</dt><dd>Local demonstration</dd></div></dl></header><h2 id="list-heading" tabindex="-1">Preparation tasks</h2><p id="count" role="status">0 of 2 prerequisites complete</p><ol class="tasks" id="tasks"></ol><section class="panel" id="panel" hidden><h2 id="panel-heading" tabindex="-1"></h2><p id="panel-description"></p><button class="action" id="complete" type="button">Mark example check complete</button></section><button class="reset" type="button" id="reset">Reset example</button><small>OpenDesign interpretation of AgDS tokens and task semantics; not native React rendering. No regulatory eligibility decision or submission is made.</small></main><script>
let done=[false,false],recent=-1,current=-1,reviewed=false,timer;const names=['Check commodity description','Check collection route','Review preparation record'];const descriptions=['Confirm that the fictional record says dried botanical samples. In a real service, this task would open the actual commodity questions.','Confirm that this example uses a local demonstration route. This does not check an actual transport route or import condition.','Both preparation checks are complete. This local review confirms only that the example tasks were visited; it does not submit a declaration.'];const tasks=document.querySelector('#tasks'),panel=document.querySelector('#panel');function render(){tasks.replaceChildren();for(let n=0;n<3;n++){const blocked=n===2&&!done.every(Boolean),complete=n<2?done[n]:reviewed;const state=blocked?'blocked':recent===n?'doneRecently':complete?'done':current===n?'doing':'todo';let li=document.createElement('li');li.className='task';li.dataset.state=state;let trigger=document.createElement(blocked?'strong':'button');trigger.textContent=names[n];if(!blocked){trigger.type='button';trigger.onclick=()=>{current=n;panel.hidden=false;document.querySelector('#panel-heading').textContent=names[n];document.querySelector('#panel-description').textContent=descriptions[n];document.querySelector('#complete').textContent=n===2?'Finish local review':'Mark example check complete';render();document.querySelector('#panel-heading').focus()}}let s=document.createElement('span');s.className='status';s.textContent={blocked:'Cannot start yet',done:'Completed',doneRecently:'Completed',doing:'In progress',todo:'Not started'}[state];li.append(trigger,s);if(blocked){let p=document.createElement('p');p.textContent='Complete both preparation checks before review.';li.append(p)}tasks.append(li)}document.querySelector('#count').textContent=done.filter(Boolean).length+' of 2 prerequisites complete'+(reviewed?' · Local review completed':'')};document.querySelector('#complete').onclick=()=>{if(current<2)done[current]=true;else reviewed=true;recent=current;current=-1;panel.hidden=true;render();document.querySelector('#list-heading').focus();clearTimeout(timer);timer=setTimeout(()=>{recent=-1;render()},2000)};document.querySelector('#reset').onclick=()=>{clearTimeout(timer);done=[false,false];recent=current=-1;reviewed=false;panel.hidden=true;render()};render();
</script></html>
```

Kod referansı

- Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.

- Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.

## Agriculture tasarım sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Yerel paket meta verileri ve içe aktarımlar kaynaklardan doğrulanmıştır. Geçici bir yerel bağımlılık yüklemesi denendi ancak tamamlanmadı; bağımsız önizleme, yerel bir React derlemesi olduğu iddiasını taşımaz ve açıkça bir yorum niteliğindedir. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP dosyası, önizlemenin tam bağımlılıklarını ve belgenin tamamını da içerir. Dosyayı çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/agriculture-agds.html adresini açın. Modül kullanan örnekleri file:// üzerinden açmayın.

```
npm install @ag.ds-next/react@1.35.4 @emotion/react @emotion/cache react react-dom
# Existing client-rendered React app: use the complete Core/TaskList example above.
# Next.js App Router: additionally integrate the official RootStyleRegistry.
```

### Projeniz İçin Bir İstem

```
Birden çok görev içeren hazırlık işlemi için AgDS Core ve TaskList kullanın. todo, doing, done, doneRecently, blocked ve notRequired durumlarını açıkça modelleyin. Ön koşulları yalnızca rozet metninde değil, uygulama mantığında da uygulayın. Duyarlı aralık özelliklerini, sistem yazı tipi yığınını ve ön plan/arka plan renk rollerini kullanın. Kaydın özetini görünür tutun ve engellenmiş işleri açıklayın. Devlet logolarından, uydurma mevzuat kararlarından ve sahte gönderim başarılarından kaçının.
```

## Agriculture tasarım sistemi Kaynaklar ve Kapsam

Kurgusal ürün hazırlama verileri içeren örnek bir eğitim hizmeti modeli. Mevzuata uygunluk durumunu belirlemez veya işlem göndermez. Kurum kimliğine ait işaretler içermez. Yerel React API örnekleri ile yorumlanmış önizleme açıkça birbirinden ayrılmıştır.

- Agriculture Design System AgDS kaynaklarının resmî kaydı.

- Temel ilkeler Temel tasarım ilkeleri.

- Bileşenler Hizmet uygulamaları için arayüz yapı taşları.

- Modeller Uçtan uca görevler oluşturma modelleri.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

## Agriculture tasarım sistemi İlgili Kaynaklar

### Alberta tasarım sistemi

Erişilebilir seçenekler, türetilmiş ilerleme ve gerçeğe uygun inceleme geri bildirimi içeren eksiksiz bir hazırlık kontrol listesi oluşturmak için Alberta’nın yerel web bileşenlerini ve yayımlanmış tasarım belirteçlerini kullanın.

### Amsterdam

Eksiksiz ve nötr bir tema, erişilebilir etiketler ve anında okuma tercihleriyle Amsterdam’ın gerçek açık kaynaklı Switch sözleşmesini kullanın.

### B.C. tasarım sistemi

Gerçek anlamsal belirteçler, yerel React Aria kontrolleri, koşullu iletişim alanları ve eksiksiz doğrulama davranışıyla B.C. tarzında bir hatırlatma tercih formu oluşturun.


- [Uygulama başvurusu](https://design-system.agriculture.gov.au/components/task-list)
- [Kaynak](https://design-system.agriculture.gov.au/foundations/tokens/typography)
- [Kaynak](https://design-system.agriculture.gov.au/foundations/tokens/spacing)
- [Kaynak](https://design-system.agriculture.gov.au/foundations/tokens/breakpoints)
- [Kaynak](https://design-system.agriculture.gov.au/foundations/tokens/colour)
- [Destekleyici belirtimi okuyun](https://design-system.agriculture.gov.au/components/core)
- [Destekleyici belirtimi okuyun](https://design-system.agriculture.gov.au/foundations/tokens/typography)
- [Destekleyici belirtimi okuyun](https://design-system.agriculture.gov.au/foundations/tokens/spacing/)
- [Destekleyici belirtimi okuyun](https://design-system.agriculture.gov.au/foundations/tokens/colour)
- [Destekleyici belirtimi okuyun](https://design-system.agriculture.gov.au/components/task-list)
- [Destekleyici belirtimi okuyun](https://design-system.agriculture.gov.au/components/summary-list)
- [Destekleyici belirtimi okuyun](https://design-system.agriculture.gov.au/guides/getting-started)
- [Kod referansı](https://design-system.agriculture.gov.au/components/task-list)
- [Kod referansı](https://design-system.agriculture.gov.au/components/summary-list)
- [Agriculture Design System AgDS kaynaklarının resmî kaydı.](https://design-system.agriculture.gov.au/)
- [Temel ilkeler Temel tasarım ilkeleri.](https://design-system.agriculture.gov.au/foundations)
- [Bileşenler Hizmet uygulamaları için arayüz yapı taşları.](https://design-system.agriculture.gov.au/components)
- [Modeller Uçtan uca görevler oluşturma modelleri.](https://design-system.agriculture.gov.au/patterns)