# Дизайн-система Queensland Government ## Предварительный просмотр интерфейса дизайн-система Queensland Government Выбирайте иллюстрированные ресурсы, проверяйте их названия в стандартном модальном окне и редактируйте локальный список. ## Справочник по дизайну дизайн-система Queensland Government Экспорты фактического пакета @qld-gov-au/qgds-bootstrap5 2.4.1 CSS и поведение модального окна Bootstrap; локально загружается Noto Sans. ### Стандартная светлая палитра | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --qld-color-default-color-light-action-primary | #005eb8 | Фактическая светлая роль QGDS Bootstrap 2.4.1. Используйте её с соответствующей светлой поверхностью. | | --qld-color-default-color-light-action-primary-hover | #003e96 | Фактическая светлая роль QGDS Bootstrap 2.4.1. Используйте её с соответствующей светлой поверхностью. | | --qld-color-default-color-light-background-default | #ffffff | Фактическая светлая роль QGDS Bootstrap 2.4.1. Используйте её с соответствующей светлой поверхностью. | | --qld-color-default-color-light-background-alt | #e3e7ea | Фактическая светлая роль QGDS Bootstrap 2.4.1. Используйте её с соответствующей светлой поверхностью. | | --qld-color-default-color-light-focus-default | #002e85 | Фактическая светлая роль QGDS Bootstrap 2.4.1. Используйте её с соответствующей светлой поверхностью. | | --qld-color-default-color-light-link-default | #005eb8 | Фактическая светлая роль QGDS Bootstrap 2.4.1. Используйте её с соответствующей светлой поверхностью. | | --qld-color-default-color-light-link-visited | #551a8b | Фактическая светлая роль QGDS Bootstrap 2.4.1. Используйте её с соответствующей светлой поверхностью. | | --qld-color-default-color-light-text-default | #353535 | Фактическая светлая роль QGDS Bootstrap 2.4.1. Используйте её с соответствующей светлой поверхностью. | | --qld-color-default-color-light-text-heading | #000053 | Фактическая светлая роль QGDS Bootstrap 2.4.1. Используйте её с соответствующей светлой поверхностью. | ### Стандартная тёмная палитра | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --qld-color-default-color-dark-action-primary | #84d3ff | Фактическая парная тёмная роль; не используйте светлый цвет переднего плана на тёмной поверхности, не проверив, что он предназначен для этой пары. | | --qld-color-default-color-dark-action-primary-hover | #a6f7ff | Фактическая парная тёмная роль; не используйте светлый цвет переднего плана на тёмной поверхности, не проверив, что он предназначен для этой пары. | | --qld-color-default-color-dark-background-default | #005eb8 | Фактическая парная тёмная роль; не используйте светлый цвет переднего плана на тёмной поверхности, не проверив, что он предназначен для этой пары. | | --qld-color-default-color-dark-background-alt | #001d74 | Фактическая парная тёмная роль; не используйте светлый цвет переднего плана на тёмной поверхности, не проверив, что он предназначен для этой пары. | | --qld-color-default-color-dark-focus-default | #c6ffff | Фактическая парная тёмная роль; не используйте светлый цвет переднего плана на тёмной поверхности, не проверив, что он предназначен для этой пары. | | --qld-color-default-color-dark-link-default | #ffffff | Фактическая парная тёмная роль; не используйте светлый цвет переднего плана на тёмной поверхности, не проверив, что он предназначен для этой пары. | | --qld-color-default-color-dark-link-visited | #f2cdff | Фактическая парная тёмная роль; не используйте светлый цвет переднего плана на тёмной поверхности, не проверив, что он предназначен для этой пары. | | --qld-color-default-color-dark-text-default | #ffffff | Фактическая парная тёмная роль; не используйте светлый цвет переднего плана на тёмной поверхности, не проверив, что он предназначен для этой пары. | | --qld-color-default-color-dark-text-heading | #ffffff | Фактическая парная тёмная роль; не используйте светлый цвет переднего плана на тёмной поверхности, не проверив, что он предназначен для этой пары. | ### Основной текст, скругления и геометрия модального окна | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --qld-body-font-family | var(--qld-font-sans-serif) | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | | --qld-body-font-size | 1rem | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | | --qld-body-line-height | 1.5 | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | | --qld-border-radius | .25rem | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | | --qld-border-radius-sm | .25rem | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | | --qld-border-radius-lg | .25rem | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | | --qld-border-radius-xl | 1rem | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | | --qld-border-radius-xxl | 2rem | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | | --qld-border-radius-pill | 50rem | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | | --qld-modal-border-radius | var(--qld-border-radius-lg) | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | | --qld-modal-title-line-height | 1.5 | Экспортированное значение реализации. Исходные цвета иллюстраций ресурсов и скругление карточек 8px — особенности примера, а не дополнительные официальные токены темы. | ## Полное руководство дизайн-система Queensland Government Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Выберите способ внедрения дизайн-система Queensland Government для Квинсленда ### Точно укажите среду выполнения > В документации Квинсленда описано несколько способов внедрения. В этом примере используется публичный пакет @qld-gov-au/qgds-bootstrap5 версии 2.4.1 и его поведение модального окна Bootstrap. Здесь не утверждается, что пример работает с более новой веткой веб-компонентов Lit. Указание названия реализации и версии помогает не перепутать компоненты с похожими названиями, но несовместимыми правилами инициализации. ### Отделяйте стабильные примеры от разрабатываемых веток В официальном репозитории веб-компонентов текущая ветка помечена как alpha, а более старый вариант Vanilla — отдельная реализация для справки. В исполняемом примере используется один проверенный путь на основе Bootstrap. Перед будущим переходом следует заново проверить разметку, названия токенов и контракты компонентов, а не просто заменить URL таблицы стилей. ## Роли темы дизайн-система Queensland Government и иллюстрации ресурсов ### Сопоставляйте светлые и тёмные роли Таблица параметров содержит парные роли для светлой и тёмной темы из реального пакета. Основные действия, цвета ссылок, фокуса и текста меняются в зависимости от контекста поверхности. В текущем наборе ресурсов используется светлая композиция; тёмные значения приведены для справки и не означают, что на странице есть переключатель темы. ### Используйте иллюстрации, не придумывая фирменные токены На каждой карточке изображён оригинальный документ с номером. Четыре приглушённых фона иллюстраций помогают различать созданные для примера типы ресурсов. Эти цвета и внешний радиус карточек 8px относятся к стилю приложения и указаны отдельно от опубликованной таблицы ролей. Библиотека предоставляет настоящие кнопки, оформление флажков и модального окна, на которых основан интерфейс. ## Масштаб текста и содержимое карточек дизайн-система Queensland Government ### Подключите стандартный шрифт основного текста Для основного текста пакет использует шрифт без засечек размером 1rem и межстрочным интервалом 1.5. В предварительном просмотре локально загружается Noto Sans, поэтому результат не зависит от запроса к Google Fonts. Заголовки, описания и счётчик выбранных ресурсов остаются удобочитаемыми и при переходе карточек в один столбец. ### Добавьте полезное описание к каждому ресурсу В каждой карточке указаны тип, примерная продолжительность чтения, конкретное название и краткое назначение ресурса. Указанная длительность — оценка для семинара, а не аналитика использования. В подписи флажка повторяется название ресурса, чтобы действие было понятно пользователю вспомогательных технологий и вне контекста карточки. Вся карточка не превращается в неоднозначную область для нажатия. ## Выбор флажками и отображение результатов дизайн-система Queensland Government ### Отключайте действие проверки, если ничего не выбрано Независимые флажки позволяют выбрать любое сочетание из четырёх ресурсов. В Set хранятся индексы выбранных ресурсов; счётчик и список для проверки формируются из этого состояния. Пока Set пуст, действие проверки выбора отключено. Так не открывается диалог без полезного содержимого, а видимый нулевой счётчик объясняет причину. - Используйте независимые флажки для списка ресурсов с множественным выбором. - Рассчитывайте счётчик выбранных ресурсов по тем же данным, что и содержимое диалога. - Указывайте название ресурса в подписи каждого флажка. ### Сбрасывайте устаревшее подтверждение после любого изменения После локального подтверждения выбор или удаление другого ресурса скрывает прежний результат. Сводка не должна оставаться на экране так, будто она соответствует изменённому списку. Очистка списка сбрасывает Set и фактические элементы управления флажками, а затем переводит фокус на первый вариант. Предварительный просмотр не создаёт и не отправляет файлы. ## Диалог проверки и возврат фокуса дизайн-система Queensland Government ### Используйте стандартное модальное окно для проверки выбора Экземпляр Modal Bootstrap открывает диалог с заголовком в качестве подписи. В основной части перечислены выбранные ресурсы; действия позволяют продолжить редактирование или подтвердить выбор локально. Диалог закрывается клавишей Escape или кнопкой закрытия. При срабатывании стандартного события hidden приложение возвращает фокус к действию «Проверить выбор». ### Избегайте лишних гонок при переходах В примере не используется необязательный класс fade. Поэтому быстрое подтверждение или нажатие Escape сразу закрывает диалог, а не игнорируется во время перехода появления. Модальное окно по-прежнему управляет фокусом и отображением затемнённого фона. Анимация не должна быть необходимой для понимания того, применилось ли действие проверки. ## Дизайн-система Queensland Government Полная реализация набора ресурсов ### Воссоздайте локальную демонстрацию в точности Создайте проект Vite на чистом JavaScript и установите закреплённую версию пакета QGDS Bootstrap с помощью Bootstrap и Noto Sans. Используйте экспортированный пакетом путь qld.bootstrap.css, а не предположительный глубоко вложенный импорт из dist. Сохраните полный файл точки входа и queensland.css вместе с корневым элементом для монтирования. Исходный код включает все записи ресурсов, оригинальные SVG-иллюстрации, логику выбора и переходы модального окна. 1. Установите закреплённую версию пакета QGDS Bootstrap и общедоступный шрифт. 2. Используйте экспортированный путь к таблице стилей, полный файл точки входа и CSS. 3. Выберите два ресурса и проверьте Escape и возврат фокуса. 4. Подтвердите выбор локально, измените его и убедитесь, что прежний результат сброшен. ### Продумайте переходы и правила управления фокусом в модальном окне В варианте QGDS Bootstrap используется Bootstrap Modal, поэтому закрытие должно соответствовать штатному жизненному циклу модального окна. Возвращайте фокус к кнопке Review selection после события hidden.bs.modal, а не по произвольно выбранной задержке. Если позже добавите fade, учитывайте длительность перехода: немедленный запрос на закрытие во время открытия может быть проигнорирован. При открытии модального окна формируйте список для проверки на основе текущего выбора, а изменение флажка должно аннулировать предыдущее локальное подтверждение. Клавиша Escape закрывает окно проверки, не меняя выбор. Если отделить флажки от иллюстраций карточек, действия по всему элементу не будут конфликтовать с выбором, а для каждого ресурса можно задать точную доступную подпись. ## Дизайн-система Queensland Government Примеры компонентов дизайн-системы ### main.js — полный код выбора ресурсов и проверки в модальном окне Все исходные данные, иллюстрации, состояние флажков и интеграция со штатным модальным окном. ``` import Modal from 'bootstrap/js/dist/modal'; import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css'; import '@fontsource/noto-sans/latin-400.css'; import '@fontsource/noto-sans/latin-700.css'; import './queensland.css'; const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`

QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY

Build a workshop resource pack

Choose useful sample resources, then review your local selection. No files are requested or sent.

0 resources selected

${resources.map(([title,desc,type,time],i)=>`

${type} · ${time}

${title}

${desc}

`).join('')}
`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()}); ``` Справочник по коду - Таблица стилей пакета подключается через экспортированную точку входа. Локальное подтверждение не скачивает файл и не отправляет данные в службу. ### queensland.css — оригинальная композиция карточек Адаптивные карточки и декоративные рисунки документов дополняют штатное оформление компонентов. ``` body{margin:0}main{max-width:1200px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:26ch}.lead{max-width:65ch}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ccc;margin-bottom:24px}.selection-bar p{margin:0;font-weight:700}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.resource-card{border:1px solid #ccc;border-radius:8px;overflow:hidden}.card-body{padding:24px}.card-body h2{font-size:24px;line-height:1.3}.meta{font-size:14px}.art{height:130px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:#eaf4f7;color:#005e85}.art-1{background:#eef3ea;color:#3b6738}.art-2{background:#f4eef7;color:#6b427b}.art-3{background:#faf0e4;color:#8c592b}.art span{font-size:36px;font-weight:700}.art svg{width:160px;height:90px;fill:none;stroke:currentColor;stroke-width:3}.form-check{margin-top:24px}.modal-title{margin:0}.modal li{margin:12px 0}#result{margin-top:32px;padding:24px;background:#eef5f3;border-left:4px solid #20775b}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.resource-grid{grid-template-columns:1fr}.selection-bar{align-items:start;flex-direction:column}.art{height:110px}h1{font-size:34px}} ``` Справочник по коду - Цвета иллюстраций и геометрия внешних карточек — оригинальные решения приложения. ## Дизайн-система Queensland Government Настройка агента ### Отправная точка для реализации Предпросмотр использует общедоступные шрифты и штатную логику модального окна; отправка данных на сервер не реализована. ``` npm create vite@latest qld-resource-pack -- --template vanilla cd qld-resource-pack npm install npm install @qld-gov-au/qgds-bootstrap5@2.4.1 bootstrap@5.3.8 @fontsource/noto-sans # Replace src/main.js and add src/queensland.css. Keep
. npm run dev ``` ### Запрос для вашего проекта ``` Создайте демонстрацию набора ресурсов Квинсленда на QGDS Bootstrap 2.4.1, используя реальные роли палитры и штатный Modal. Сохраните подписи флажков, вычисляемое количество, недоступность кнопки проверки при пустом выборе, закрытие по Escape, возврат фокуса и сброс устаревшего результата. Не смешивайте оригинальные иллюстрации с официальными токенами темы и не создавайте впечатление, будто ресурсы действительно предоставляются. ``` ## Дизайн-система Queensland Government Источники и область применения Оригинальная демонстрация набора ресурсов OpenDesign на QGDS Bootstrap 2.4.1. Это реализация Bootstrap, а не поток альфа-версии веб-компонентов; выбор остаётся локальным, данные никуда не отправляются. - Варианты реализации Vanilla, Bootstrap и разрабатываемые веб-компоненты. - Исходный код Bootstrap с указанием версии Опубликованный CSS, ресурсы и варианты реализации. - Рекомендации по карточкам Иерархия содержимого и использование карточек. - Статус веб-компонентов Явное указание статуса альфа-версии и отдельного контракта интеграции. ## Дизайн-система Queensland Government Связанные ресурсы ### Ripple Изучите реальные цветовые роли Ripple, шкалу отступов из 14 шагов и ссылки на адаптивную типографику на примере полноценного расписания семинара с последовательным раскрытием информации, индикатором выполнения и переходом к следующему шагу с клавиатуры. ### Scottish Government дизайн-система Примените адаптивную типографику, отступы и цветовые роли правительства Шотландии во встроенном поле со счётчиком символов, которое сохраняет текст при превышении лимита и позволяет исправить ввод. ### Singapore Government дизайн-система Используйте актуальные веб-компоненты SGDS, настоящие адаптивные токены, дневную и ночную темы, а также встроенные ограничения количества, синхронизирующие локальный план. - [Справочник по реализации](https://github.com/qld-gov-au/qgds-bootstrap5) - [Источник](https://github.com/qld-gov-au/qgds-bootstrap5) - [Справочник по коду](https://github.com/qld-gov-au/qgds-bootstrap5) - [Справочник по коду](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [Варианты реализации Vanilla, Bootstrap и разрабатываемые веб-компоненты.](https://www.designsystem.qld.gov.au/get-started/developing) - [Исходный код Bootstrap с указанием версии Опубликованный CSS, ресурсы и варианты реализации.](https://github.com/qld-gov-au/qgds-bootstrap5) - [Рекомендации по карточкам Иерархия содержимого и использование карточек.](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [Статус веб-компонентов Явное указание статуса альфа-версии и отдельного контракта интеграции.](https://github.com/qld-gov-au/qgds-web-components)