# Дизайн-система Canada.ca ## Предварительный просмотр интерфейса дизайн-система Canada.ca Отфильтруйте шесть подготовленных тем, раскрывайте нативные блоки details и восстановите исходное состояние при пустой выдаче. ## Справочник дизайн-система Canada.ca Опубликованные экспорты CSS и контракты компонентов @gcds-core/components 1.6.0; в локальном предварительном просмотре встроен @gcds-core/fonts 1.1.1. ### Семантические роли цветов и взаимодействия | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --gcds-text-primary | #333 | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-text-secondary | #595959 | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-bg-primary | #26374a | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-bg-light | #f2f2f2 | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-link-default | #1f497a | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-link-hover | #1354ec | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-link-visited | #4b248f | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-focus-background | #1354ec | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-focus-text | #fff | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-danger-text | #b3192e | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-disabled-background | #d9d9d9 | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | | --gcds-border-default | #8c8c8c | Используйте семантическую роль для текста, поверхностей или состояний взаимодействия. Цвет фокуса — не декоративный акцент. | ### Типографика и удобная для чтения ширина | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --gcds-font-h1 | 700 2.5625rem/117% "Lato",sans-serif | Опубликованный экспорт типографики CSS. Прежде чем оценивать длину строк и переносы, загрузите Lato и Noto Sans. | | --gcds-font-h2 | 700 2.4375rem/123% "Lato",sans-serif | Опубликованный экспорт типографики CSS. Прежде чем оценивать длину строк и переносы, загрузите Lato и Noto Sans. | | --gcds-font-h3 | 700 1.8125rem/137% "Lato",sans-serif | Опубликованный экспорт типографики CSS. Прежде чем оценивать длину строк и переносы, загрузите Lato и Noto Sans. | | --gcds-font-h4 | 700 1.6875rem/133% "Lato",sans-serif | Опубликованный экспорт типографики CSS. Прежде чем оценивать длину строк и переносы, загрузите Lato и Noto Sans. | | --gcds-font-text | 400 1.25rem/160% "Noto Sans",sans-serif | Опубликованный экспорт типографики CSS. Прежде чем оценивать длину строк и переносы, загрузите Lato и Noto Sans. | | --gcds-font-text-small | 400 1.125rem/155% "Noto Sans",sans-serif | Опубликованный экспорт типографики CSS. Прежде чем оценивать длину строк и переносы, загрузите Lato и Noto Sans. | | --gcds-text-character-limit | 65ch | Опубликованный экспорт типографики CSS. Прежде чем оценивать длину строк и переносы, загрузите Lato и Noto Sans. | ### Интервалы и контейнеры | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --gcds-spacing-100 | 0.5rem | Используйте экспортированное значение в rem, а не считайте суффикс токена количеством пикселей. | | --gcds-spacing-150 | 0.75rem | Используйте экспортированное значение в rem, а не считайте суффикс токена количеством пикселей. | | --gcds-spacing-200 | 1rem | Используйте экспортированное значение в rem, а не считайте суффикс токена количеством пикселей. | | --gcds-spacing-300 | 1.5rem | Используйте экспортированное значение в rem, а не считайте суффикс токена количеством пикселей. | | --gcds-spacing-400 | 2rem | Используйте экспортированное значение в rem, а не считайте суффикс токена количеством пикселей. | | --gcds-spacing-600 | 3rem | Используйте экспортированное значение в rem, а не считайте суффикс токена количеством пикселей. | | --gcds-container-sm | 30rem | Используйте экспортированное значение в rem, а не считайте суффикс токена количеством пикселей. | | --gcds-container-md | 48rem | Используйте экспортированное значение в rem, а не считайте суффикс токена количеством пикселей. | | --gcds-container-lg | 62rem | Используйте экспортированное значение в rem, а не считайте суффикс токена количеством пикселей. | | --gcds-container-xl | 71.25rem | Используйте экспортированное значение в rem, а не считайте суффикс токена количеством пикселей. | ## Полное руководство дизайн-система Canada.ca Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Текущие компоненты и область действия пакета дизайн-система Canada.ca ### Используйте актуальное пространство имён > GC Design System — это система компонентов, используемая в этом ресурсе Canada.ca. В примере зафиксирована версия @gcds-core/components 1.6.0 и регистрируются отдельные пользовательские элементы input, details и button. В старых примерах может использоваться пространство имён @cdssnc. Ориентируйтесь на установленную версию пакета и не смешивайте код регистрации из разных выпусков. ### Отделяйте материалы для ознакомления от материалов услуги В примере представлены шесть подготовленных тем для ознакомления. Здесь нет символики Правительства Канады, интеграции с системой бронирования или утверждений об обязательных документах. Цель примера — показать работающий шаблон раскрываемого содержимого с поиском. Повторное использование компонентов не означает, что приложение является официальной услугой или что его содержимое соответствует всем требованиям Canada.ca. ## Типографика и ритм чтения дизайн-система Canada.ca ### Загрузите оба семейства шрифтов В заголовках используется Lato, в обычном тексте — Noto Sans. Опубликованная роль основного текста для настольных устройств задаёт размер 1.25rem и межстрочный интервал 160%; справочная ширина для чтения, указанная в экспорте, — 65ch. Благодаря этим значениям ритм чтения заметно свободнее, чем в компактной панели управления. В локальный предварительный просмотр встроены опубликованные файлы шрифтов, поэтому сбой внешнего запроса шрифта не приведёт к незаметному изменению результата. ### Сохраняйте полное сокращённое описание шрифта В таблице токенов указано полное значение font в формате shorthand из CSS, а не только условный размер в пикселях. Важны одновременно насыщенность, межстрочный интервал и семейство. В качестве авторского композиционного элемента в духе Canada.ca под главным заголовком проведена короткая красная линия; её ширина 72px не представлена как универсальный токен интервалов GC. При узкой ширине экрана макет становится одноколоночным, а основной текст сохраняет удобочитаемость. ## Семантические цвета и поведение фокуса дизайн-система Canada.ca ### Используйте публичные роли для значимых состояний Основной цвет текста — #333, вторичного — #595959, а приглушённая синяя поверхность — #26374a. В экспортированном CSS для ссылок, фокуса и опасных состояний предусмотрены отдельные роли. Ссылка не должна отличаться только цветом: нативный раскрываемый блок details также имеет визуальную подсказку и доступное состояние раскрытия. ### Не удаляйте видимое оформление фокуса Нативные поле ввода и кнопки обеспечивают собственное поведение фокуса компонентов. Код приложения CSS задаёт окружающую компоновку, не обращаясь к корневым узлам теневого дерева для удаления контуров. При сбросе фокус возвращается в поле поиска, чтобы пользователь клавиатуры сразу мог уточнить запрос. Shadow DOM влияет на применение правил стилей и видимости для пользовательских компонентов, поэтому проверяйте отображённый компонент, а не исходите из того, что обычные селекторы элементов охватывают все состояния. ## Содержание details и приоритет информации дизайн-система Canada.ca ### Используйте раскрываемые блоки для дополнительных пояснений Каждому нативному gcds-details передаются details-title и поясняющий текст в слот по умолчанию. Важные инструкции остаются видимыми в боковой панели. Настоящие время и адрес записи или требования нельзя показывать только после раскрытия панели. Шесть примеров намеренно носят информационный характер: они не собирают личные данные и не имитируют завершённую запись. - Оставляйте критически важную информацию об услуге видимой без раскрытия блока. - Используйте короткий и конкретный заголовок details. - Не вкладывайте раскрываемые блоки друг в друга — так содержимое труднее обнаружить. ### Сохраняйте состояние раскрытия при фильтрации Приложение создаёт каждый элемент details один раз. При фильтрации скрывается его обычная обёртка, а сам компонент не удаляется и не создаётся заново. Благодаря этому раскрытая тема сохраняет своё состояние, даже если временно исчезает из результатов и затем появляется снова. Скрытие обёртки также позволяет не полагаться на то, как внутренние стили отображения пользовательского элемента обрабатывают внешнее правило hidden. ## Дизайн-система Canada.ca Поиск и восстановление при отсутствии результатов ### Подпишитесь на документированное пользовательское событие Для gcds-input необходимы атрибуты label, input-id и name. Событие gcdsInput передаёт новое значение в event.detail. Приложение сравнивает запрос без пробелов по краям и в нижнем регистре с заголовками тем и текстом. В области статуса с динамическим обновлением отображается число найденных тем; если совпадений нет, выводится полезное сообщение с дальнейшими действиями, а не необъяснимо пустая область. ### Сброс должен полностью обновлять состояние Вторая нативная кнопка очищает значение компонента, восстанавливает все шесть записей и устанавливает фокус на внутреннее поле ввода. При этом она не сбрасывает раскрытую ранее тему. Такое разделение делает состояние поиска и чтения предсказуемым. Для поиска по удалённому набору данных в рабочем приложении также понадобились бы правила обработки загрузки, ошибок запросов и порядка результатов; для этого локального фильтра из шести элементов ничего из этого не требуется. ## Полная интеграция дизайн-система Canada.ca с JavaScript ### Воспроизведите работающий пример Создайте проект Vite с vanilla-шаблоном, установите закреплённую версию пакета компонентов и замените точку входа полным кодом ниже JavaScript. Сохраните canada.css рядом с ней и оставьте корневой элемент для монтирования. Точки входа пользовательских элементов напрямую регистрируют необходимые зависимости; пакет CSS подключает слой токенов. В исходном коде содержатся полный набор данных, регистрация, фильтрация и логика сброса. 1. Установите закреплённую версию пакета в проект Vite с vanilla-шаблоном. 2. Сохраните полный файл точки входа и canada.css, оставив корневой элемент для монтирования. 3. Найдите слово без совпадений и убедитесь, что появилось сообщение с дальнейшими действиями. 4. Выполните сброс, раскройте тему и снова примените фильтр, чтобы проверить сохранение состояния чтения. ### Скрывайте обёртки результатов, не сбрасывая состояние раскрытых элементов Поместите каждый gcds-details в обычную обёртку и при фильтрации переключайте для неё состояние hidden. Иначе собственные правила отображения пользовательского элемента могут нарушить предположения, заложенные в универсальных селекторах CSS. Не удаляйте экземпляры из DOM: после очистки запроса раскрытые темы должны возвращаться в прежнем состоянии. Поиск и раскрытие — отдельные элементы управления. Получайте запрос из event.detail события gcdsInput, сообщайте число результатов и оставляйте нативному элементу details управление собственным состоянием раскрытия. При сбросе обновляйте как значение компонента, так и модель запроса, а затем возвращайте фокус в поле ввода; пересоздание всей области результатов сбросило бы позицию читателя. ## Дизайн-система Canada.ca Примеры компонентов дизайн-системы ### main.js — полный фильтр тем на нативных компонентах Полный файл точки входа с регистрацией компонентов, авторскими темами, фильтрацией, сохранением состояния раскрытия и сбросом. ``` import {defineCustomElement as input} from '@gcds-core/components/dist/components/gcds-input.js'; import {defineCustomElement as details} from '@gcds-core/components/dist/components/gcds-details.js'; import {defineCustomElement as button} from '@gcds-core/components/dist/components/gcds-button.js'; import '@gcds-core/components/dist/gcds/gcds.css'; import './canada.css'; input();details();button(); document.getElementById('root').innerHTML=`

GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY

Prepare for an appointment

Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.

Reset filter

Preparation topics

`; const topics=[['Confirm the time','Check the time and time zone shown in a real booking confirmation. This sample does not contain a live appointment.'],['Review the location','A real service should provide an address or joining instructions. A location belongs in visible booking details, not only inside a collapsed panel.'],['Plan access needs','Ask the service about accessibility arrangements through its official contact route. This sample demonstrates disclosure behavior and does not promise a particular accommodation.'],['Check documents','Follow the actual service’s published document requirements. This authored example intentionally does not invent a list of mandatory identity documents.'],['Keep a reference','If the service provides a booking reference, keep it with your confirmation. Do not paste personal reference numbers into this public specimen.'],['Prepare questions','Write down what you want to understand. In a real service, clear preparation content can reduce the need to remember questions during the appointment.']];const $=id=>document.getElementById(id);const entries=topics.map(([title,text])=>{const el=document.createElement('gcds-details');el.setAttribute('details-title',title);const p=document.createElement('p');p.textContent=text;el.append(p);const wrapper=document.createElement('div');wrapper.append(el);$('topics').append(wrapper);return{el,wrapper,title,text}});function render(q=''){let count=0;for(const item of entries){item.wrapper.hidden=!(item.title+' '+item.text).toLowerCase().includes(q.trim().toLowerCase());if(!item.wrapper.hidden)count++}$('count').textContent=count+' of '+topics.length+' sample topics';$('empty').hidden=count>0}$('filter').addEventListener('gcdsInput',e=>render(e.detail));$('reset').addEventListener('click',()=>{$('filter').value='';render();$('filter').shadowRoot.querySelector('input')?.focus()});render(); ``` Справочник по коду - Сохраните как src/main.js, добавив корневой элемент для монтирования. Опубликованный пакет CSS загружает URL шрифтов по умолчанию; в локальном предпросмотре встроены те же общедоступные шрифты. ### canada.css — адаптивная композиция содержимого Исходная компоновка страницы вокруг стилей нативных компонентов. ``` *{box-sizing:border-box}body{margin:0;background:white;color:var(--gcds-text-primary);font:var(--gcds-font-text)}main{padding:32px}h1{font:var(--gcds-font-h1);margin:16px 0 24px;max-width:24ch}h1:after{content:'';display:block;width:72px;height:6px;background:#a62a1e;margin-top:16px}h2{font:var(--gcds-font-h3);margin:0 0 24px}h3{font:var(--gcds-font-h4)}p{margin:0 0 24px;max-width:65ch}.eyebrow,.small{font:var(--gcds-font-text-small)}.lead{max-width:65ch}.search-row{display:flex;align-items:end;gap:24px;margin:32px 0;border-top:1px solid #ccc;padding-top:24px}.search-row gcds-input{flex:1;max-width:650px}.search-row gcds-button{margin-bottom:var(--gcds-input-margin)}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:48px}aside{background:var(--gcds-color-grayscale-50);border-left:4px solid var(--gcds-color-blue-muted);padding:24px;align-self:start}aside h2{font:var(--gcds-font-h4)}aside ol{padding-left:24px}aside li{padding-left:8px;margin:16px 0}#count{font:var(--gcds-font-text-small)}#empty{padding:24px;background:var(--gcds-color-grayscale-50)}gcds-details{display:block}gcds-details p{padding-top:8px}[hidden]{display:none!important}@media(max-width:767px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}.search-row{display:block}.search-row gcds-button{display:block;margin-top:16px}h1{font-size:2rem}aside{padding:20px}} ``` Справочник по коду - Контрольная точка макета и геометрия подчёркивания заголовка — решения для примера, а не дополнительные официальные токены. ## Дизайн-система Canada.ca Настройка агента ### Отправная точка для реализации Для локального предпросмотра используются закреплённые версии пользовательских элементов; удалённые сервисы и учётные данные не нужны. ``` npm create vite@latest gc-topics -- --template vanilla cd gc-topics npm install npm install @gcds-core/components@1.6.0 # Replace src/main.js and add src/canada.css; keep
. npm run dev ``` ### Запрос для вашего проекта ``` Создайте руководство по подготовке из шести тем с помощью GC Design System 1.6.0. Подключите настоящие шрифты и набор токенов CSS, используйте нативные компоненты ввода, details и button, сохраняйте состояние раскрытия при фильтрации, сообщайте число результатов и обеспечьте полноценный сброс. Оставьте важное содержимое видимым и чётко отделите пояснения к примеру от официальных требований сервиса. ``` ## Дизайн-система Canada.ca Источники и область применения Учебный пример приложения для Canada.ca, созданный с помощью OpenDesign и GC Design System 1.6.0. Примеры тем — вымышленные рекомендации, а не требования правительства или официальная система записи. - Поля ввода API Обязательные идентификаторы, метки и пользовательские события. - Раскрывающиеся элементы API Требования к раскрытию дополнительного содержимого и заголовку. - Типографика Семейства шрифтов и шкала размеров для чтения. - Интервалы Опубликованная система отступов. - Терминология и область применения пакета Актуальное пространство имён пакета и контекст использования. ## Дизайн-система Canada.ca Связанные ресурсы ### CFPB дизайн-система Реализуйте редакционную сетку CFPB, актуальную типографику и встроенные компоненты Expandables, добавив рабочую форму для заметок, проверенные API пакетов и чёткие границы идентификации. ### CMS дизайн-система Реализуйте CMS Core с версионированными переменными темы, реальными API компонентов Review и работающим сценарием редактирования и проверки, который сохраняет ответы пользователя и фокус. ### Det Fælles Designsystem Изучите тему DKFDS для Дании, реальные шкалы Sass и доступные шаблоны таблиц на примере полного сравнения ресурсов с сортировкой по числам, поиском по отправленному запросу и восстановлением после пустого результата. - [Справочник по реализации](https://design-system.canada.ca/en/components/input/code/) - [Источник](https://design-system.canada.ca/en/styles/colour/) - [Источник](https://design-system.canada.ca/en/styles/typography/) - [Источник](https://design-system.canada.ca/en/styles/spacing/) - [Справочник по коду](https://design-system.canada.ca/en/components/input/code/) - [Справочник по коду](https://design-system.canada.ca/en/styles/typography/) - [Поля ввода API Обязательные идентификаторы, метки и пользовательские события.](https://design-system.canada.ca/en/components/input/code/) - [Раскрывающиеся элементы API Требования к раскрытию дополнительного содержимого и заголовку.](https://design-system.canada.ca/en/components/details/code/) - [Типографика Семейства шрифтов и шкала размеров для чтения.](https://design-system.canada.ca/en/styles/typography/) - [Интервалы Опубликованная система отступов.](https://design-system.canada.ca/en/styles/spacing/) - [Терминология и область применения пакета Актуальное пространство имён пакета и контекст использования.](https://design-system.canada.ca/en/terms-of-use/)