# Дизайн-система Agriculture

## Дизайн-система Agriculture Предварительный просмотр интерфейса

Выполните две предварительные проверки, откройте ставшую доступной проверку и сбросьте локальный пример.

## Дизайн-система Agriculture Справочник по дизайну

Официальная документация AgDS по токенам и компонентам, а также метаданные @ag.ds-next/react 1.35.4. Предварительный просмотр — задокументированная интерпретация на HTML/CSS; импорты React предоставляются отдельно.

### Роли типографики

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| xs / sm / md / lg | 14 / 16 / 20 / 24px | Стабильные размеры от малого до большого. |
| xl mobile → desktop | 28 → 32px | Адаптивная роль заголовка. |
| xxl / xxxl mobile → desktop | 32 → 40px / 40 → 48px | Роли крупных заголовков. |
| Body family | System UI with Helvetica/Arial fallbacks | Загружать веб-шрифт не требуется. |
### Значения отступов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| 0.25 / 0.5 / 0.75 / 1 | 4 / 8 / 12 / 16px | Связанный контент и компактные внутренние отступы. |
| 1.5 / 2 / 3 / 4 | 24 / 32 / 48 / 64px | Столбцы, поля, группы и разделы. |
| Form field gap | 2 = 32px | Роль FormStack. |
| Fieldset/group gap | 3 = 48px | Отдельные группы вопросов. |
### Контрольные точки

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| xs / sm / md | 0 / 576 / 768px | Ключи адаптивного объекта, начиная с мобильной версии. |
| lg / xl / xxl | 992 / 1200 / 1600px | Пороги для более широких экранов. |
### Светлые цветовые роли

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| text / muted | #313131 / #626262 | Основной и вспомогательный контент. |
| action | #00558b | Интерактивные элементы. |
| body / bodyAlt | #ffffff / #ebebeb | Парные роли поверхностей. |
| border / borderMuted | #808080 / #d3d3d3 | Граница обязательного элемента управления и декоративное разделение. |
## Дизайн-система Agriculture Полное руководство

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система Agriculture Core и Emotion

### Начните с настоящего провайдера

> AgDS — библиотека React со стилями на основе Emotion. Core оборачивает приложение и предоставляет стили сброса, переменные CSS и конфигурацию темы. Импорт выбранной темы берётся из @ag.ds-next/react/ag-branding; он подключается отдельно от Core, а не задаётся через выдуманное свойство провайдера каждого компонента.

Автономный пример — это явная интерпретация задокументированных токенов и состояний задач на HTML/CSS. Он не претендует на запуск библиотеки React. Его машина состояний помогает изучить поведение зависимостей; в полном примере React показан реальный путь реализации с компонентами.

Прочитать вспомогательную спецификацию

## Дизайн-система Agriculture Типографика и шкала размеров системы

### Читаемый текст без загрузки шрифтов

В AgDS используется системный стек шрифтов, включающий системный шрифт интерфейса платформы, а также Helvetica и Arial в качестве запасных вариантов. Задокументированная шкала размеров шрифта: xs — 14px, sm — 16px, md — 20px и lg — 24px. На мобильных устройствах крупные размеры меняются: xl — 28→32px, xxl — 32→40px и xxxl — 40→48px.

Высота строки настраивается с шагом 4px средствами типографической системы. Используйте роли fontSize и lineHeight компонента вместо того, чтобы умножать каждый размер шрифта на произвольный коэффициент. В предварительном просмотре используется основной размер sm, заголовок 32px на мобильных устройствах и 40px на более широких экранах, а также шрифт, не требующий загрузки.

Прочитать вспомогательную спецификацию

## Дизайн-система Agriculture Отступы и адаптивные свойства

### Числа обозначают токены на основе rem

Значение gap 1.5 в AgDS соответствует 24px при стандартном размере корневого элемента; это не 1.5px. Задокументированная шкала отступов включает 0.25=4px, 0.5=8px, 0.75=12px, 1=16px, 2=32px и 3=48px. FormStack использует значение 2 для интервалов между полями, а для более крупных групп полей — 3.

Адаптивные свойства принимают именованные объекты контрольных точек. Box с padding={{xs:1,md:3}} использует сначала 16px, а при ширине 768px увеличивает значение до 48px. Пропущенные промежуточные ключи наследуют предыдущее значение. Это нагляднее, чем набор несвязанных переопределений CSS.

Прочитать вспомогательную спецификацию

## Дизайн-система Agriculture Цвет текста зависит от фона

### Используйте светлые и тёмные роли вместе

В справочнике цветов определены парные роли текста, фона, границы и системных цветов. Светлый текст — #313131, приглушённый текст — #626262, цвет действия — #00558b. В тёмной палитре цвет действия меняется на #9ee8ff. Цвет действия обозначает интерактивность; не используйте его как декоративный элемент для задачи, которую нельзя открыть.

В предварительном просмотре используется светлая палитра и синяя подчёркнутая ссылка действия. Заблокированная задача отображается как текст с пояснением, а не как синяя кнопка, которая молча отказывается реагировать на нажатие. Выполнение обозначается словами и зелёным оформлением; статус никогда не передаётся только цветом.

Прочитать вспомогательную спецификацию

## Дизайн-система Agriculture TaskList — это навигация

### Разделяйте доступность и выполнение

Настоящий TaskList принимает items и необязательный параметр ordered. У каждого элемента есть label и status; href задаёт переход, а если href не указан, можно использовать кнопку с onClick. Допустимые значения статуса: todo, doing, done, doneRecently, blocked и notRequired.

Используйте эту структуру для операций с несколькими задачами, особенно если работа продолжается в разных сеансах. Для одной задачи список не нужен. В примере подготовка товара и маршрута — отдельные предварительные условия; проверка становится доступна только после выполнения обоих. Это локальное правило демонстрации, а не решение о возможности импорта.

- todo означает, что задачу можно начать.

- blocked означает, что предварительные условия не выполнены и начать задачу нельзя; укажите причину.

- notRequired означает, что задача больше не актуальна; это не то же самое, что выполненная задача.

Прочитать вспомогательную спецификацию

## Дизайн-система Agriculture Зависимости и недавно выполненная работа

### Значок статуса не обеспечивает соблюдение правила

Приложение вычисляет, можно ли начать проверку, на основе двух значений выполнения. Недостаточно изменить текст значка: обработчик активации должен применять то же правило. Недоступный элемент проверки в примере не является активной ссылкой. Выполнение предварительной задачи обновляет счётчик; проверка становится доступна, только когда выполнены обе задачи.

Задокументированный статус doneRecently служит временным подтверждением после возвращения к списку. В предварительном просмотре только что выполненная задача ненадолго выделяется, а затем отображается как завершённая. Сброс восстанавливает исходные предварительные условия, позволяя повторить переход без сервера или учётной записи.

Прочитать вспомогательную спецификацию

## Дизайн-система Agriculture Контекст рядом со списком задач

### Оставьте запись примера на виду

Компактная сводка над списком задач указывает вымышленную запись, товар и ссылку. Эти атрибуты описывают одну запись, поэтому здесь уместен список определений. В реализации на React документированным аналогом служат SummaryList, SummaryListItem, SummaryListItemTerm и SummaryListItemDescription.

Активная панель подготовки располагается в обычном потоке документа под списком задач. В ней объясняется, что означает выполнение в этом примере, а затем предлагается подтвердить его. При открытии фокус переводится на заголовок панели, а после выполнения — на заголовок списка. Панель не имитирует загрузку подтверждающих документов, проверку лицензии или отправку декларации.

Прочитать вспомогательную спецификацию

## Дизайн-система Agriculture Настройка клиента и сервера

### Выберите конкретный путь рендеринга

Чтобы использовать существующее клиентское приложение React, установите @ag.ds-next/react вместе с зависимостями React и Emotion, а затем примените показанную здесь композицию Core. Отдельный файл CSS с предположительными глобальными стилями не нужен: библиотека генерирует стили с помощью Emotion.

Для Next.js App Router при рендеринге на сервере требуется официальная интеграция RootStyleRegistry, которая собирает и вставляет стили Emotion. В документации приведены этот реестр и обёртка Core. Пример только для клиента не подтверждает корректность серверного рендеринга; рассматривайте связанный реестр как часть отдельного пути интеграции.

1. Установите пакет React и зависимости Emotion.

2. Оберните приложение в Core и выбранную тему.

3. Формируйте элементы TaskList из состояния приложения и проверяйте зависимости в обработчиках.

4. Для серверного рендеринга подключите задокументированный реестр стилей и проверьте гидратацию.

Прочитать вспомогательную спецификацию

## Дизайн-система Agriculture Примеры компонентов дизайн-системы

### Core, адаптивный Box и настоящий TaskList

Настоящая композиция React с локальным состоянием, учитывающим зависимости; без фиктивных элементов навигации.

```
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>;
}
```

Справочник по коду

### Сводка одной записи

Используйте настоящую композицию SummaryList для именованных значений.

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

Справочник по коду

### Полный автономный пример

Полный документ включает разметку, элементы управления и инициализацию. Распакуйте связанный архив примера, чтобы получить нужные относительные пути к ресурсам поставщика, затем запустите его через HTTP-сервер.

```
<!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>
```

Справочник по коду

- Скачайте полный пример из раздела «Источники». Точная команда локального запуска приведена в README.

- Оставьте пути к ресурсам поставщика относительными к этому документу; архив включает все ресурсы, используемые в предварительном просмотре.

## Дизайн-система Agriculture Настройка AI-агента

### Отправная точка для реализации

Метаданные нативного пакета и импорты сверены с исходным кодом. Попытка временно установить нативные зависимости не завершилась; автономный предварительный просмотр — явная интерпретация, а не заявленная нативная сборка React. ZIP-архив полного рабочего примера в разделе «Источники» также содержит точные зависимости для предварительного просмотра и полный документ. Распакуйте архив, выполните в этой директории команду python3 -m http.server 8080, затем откройте http://localhost:8080/agriculture-agds.html. Не открывайте примеры с модулями через file://.

```
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.
```

### Запрос для вашего проекта

```
Используйте Core и TaskList из AgDS для операции подготовки с несколькими задачами. Явно моделируйте состояния todo, doing, done, doneRecently, blocked и notRequired. Проверяйте предварительные условия в логике приложения, а не только по тексту значка. Используйте адаптивные свойства отступов, системный стек шрифтов и роли цветов текста и фона. Не скрывайте сводку записи и объясняйте, почему задача заблокирована. Не используйте логотипы государственных органов, не выдумывайте решения регулирующих органов и не имитируйте успешную отправку.
```

## Дизайн-система Agriculture Источники и область применения

Пример образовательного шаблона сервиса с вымышленными данными о подготовке товара. Он не определяет соответствие нормативным требованиям и не отправляет транзакцию. Без опознавательных знаков ведомства. Примеры React API и интерпретированный предварительный просмотр чётко разграничены.

- Agriculture Design System Официальная запись для ресурсов AgDS.

- Основы Основные принципы дизайна.

- Компоненты Базовые элементы интерфейса для сервисных приложений.

- Шаблоны Шаблоны для составления целостных задач.

- Скачать полный рабочий пример ZIP-архив с полным HTML, локальными зависимостями CSS/JavaScript, лицензиями и точными инструкциями по запуску. Сборка не требуется.

## Дизайн-система Agriculture Связанные ресурсы

### Alberta дизайн-система

Используйте встроенные веб-компоненты Alberta и опубликованные токены дизайна, чтобы создать полный контрольный список подготовки с доступными вариантами, вычисляемым прогрессом и понятными результатами проверки.

### Amsterdam

Используйте реальный контракт открытого компонента Switch от Amsterdam, полную нейтральную тему, доступные подписи и настройки чтения с мгновенным применением.

### B.C. дизайн-система

Создайте форму настройки напоминаний в стиле B.C. с реальными семантическими токенами, встроенными элементами управления Aria от React, условными полями контактных данных и полной валидацией.


- [Справочник по реализации](https://design-system.agriculture.gov.au/components/task-list)
- [Источник](https://design-system.agriculture.gov.au/foundations/tokens/typography)
- [Источник](https://design-system.agriculture.gov.au/foundations/tokens/spacing)
- [Источник](https://design-system.agriculture.gov.au/foundations/tokens/breakpoints)
- [Источник](https://design-system.agriculture.gov.au/foundations/tokens/colour)
- [Прочитать вспомогательную спецификацию](https://design-system.agriculture.gov.au/components/core)
- [Прочитать вспомогательную спецификацию](https://design-system.agriculture.gov.au/foundations/tokens/typography)
- [Прочитать вспомогательную спецификацию](https://design-system.agriculture.gov.au/foundations/tokens/spacing/)
- [Прочитать вспомогательную спецификацию](https://design-system.agriculture.gov.au/foundations/tokens/colour)
- [Прочитать вспомогательную спецификацию](https://design-system.agriculture.gov.au/components/task-list)
- [Прочитать вспомогательную спецификацию](https://design-system.agriculture.gov.au/components/summary-list)
- [Прочитать вспомогательную спецификацию](https://design-system.agriculture.gov.au/guides/getting-started)
- [Справочник по коду](https://design-system.agriculture.gov.au/components/task-list)
- [Справочник по коду](https://design-system.agriculture.gov.au/components/summary-list)
- [Agriculture Design System Официальная запись для ресурсов AgDS.](https://design-system.agriculture.gov.au/)
- [Основы Основные принципы дизайна.](https://design-system.agriculture.gov.au/foundations)
- [Компоненты Базовые элементы интерфейса для сервисных приложений.](https://design-system.agriculture.gov.au/components)
- [Шаблоны Шаблоны для составления целостных задач.](https://design-system.agriculture.gov.au/patterns)