# Canada.ca 设计系统 ## Canada.ca 设计系统 界面预览 筛选六个编写好的主题，展开原生详情面板，并从无结果状态中恢复。 ## Canada.ca 设计系统 设计参考 已发布的 @gcds-core/components 1.6.0 CSS 导出项和组件契约；本地预览内置了 @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。这些值营造的阅读节奏比紧凑型仪表板开阔得多。本地预览内置了已发布的字体文件，因此即使外部字体请求失败，也不会在不易察觉的情况下改变显示效果。 ### 完整遵循字体简写属性 令牌表包含实际的 CSS 字体简写属性，而不只是名义上的像素大小。字重、行高和字体系列需要综合考虑。主标题下方的短红线是灵感源自 Canada.ca 的原创构图细节；其 72px 宽度并非通用的 GC 间距令牌。视口较窄时，布局会变为单列，同时保持正文的可读性。 ## Canada.ca 设计系统 语义颜色与焦点行为 ### 使用公开角色表达有意义的状态 主要文本颜色为 #333，次要文本颜色为 #595959，克制的蓝色界面表面角色为 #26374a。在导出的 CSS 中，链接、焦点和危险状态各有其独立角色。链接不能仅通过颜色变化来识别：原生 details 披露组件还提供了操作提示和可访问的展开状态。 ### 不要移除可见的焦点样式 原生输入框和按钮会提供各自的组件焦点行为。应用的 CSS 负责周边布局，不会深入 shadow root 删除轮廓线。重置操作会将焦点返回搜索框，键盘用户可以立即调整查询。Shadow DOM 会改变自定义样式和可见性规则的适用方式，因此请检查实际渲染的组件，不要认为普通元素选择器可以覆盖所有状态。 ## Canada.ca 设计系统 详情内容与信息优先级 ### 将披露面板用于补充说明 每个原生 gcds-details 都会在默认插槽中接收 details-title 和辅助文本。重要说明应始终保留在可见的侧边栏中。实际的预约时间、地址或要求不得只在展开面板后才显示。六个示例主题仅用于提供信息；它们不会收集身份信息，也不会模拟完成预约。 - 确保重要服务信息无需展开即可查看。 - 使用简短明确的详情标题。 - 避免嵌套披露，以免内容难以查找。 ### 筛选时保留展开状态 应用只创建一次每个 details 元素。筛选时，应用会隐藏其普通包装元素，而不是销毁并重新创建组件。这样，某个主题暂时消失后再次出现时，仍会保持展开状态。隐藏包装元素还可以避免依赖自定义元素宿主的内部 display 样式来遵循外部 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 选择器的预期。保持组件实例处于挂载状态，这样清除查询后，已展开的主题就能以原有状态重新显示。 搜索和展开内容是两个独立的控件。通过 gcdsInput event.detail 读取查询，播报结果数量，并让原生 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 设计系统 Agent 设置 ### 实现起点 本地预览运行固定版本的自定义元素；无需远程服务或凭据。 ``` 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 和按钮组件，在筛选时保留展开状态，播报结果数量，并提供完整的重置行为。确保重要内容始终可见，并明确区分示例说明与官方服务要求。 ``` ## Canada.ca 设计系统 来源与范围 由 OpenDesign 编写、基于 GC Design System 1.6.0 的 Canada.ca 应用研究示例。示例主题为虚构指南，并非政府要求或官方预约服务。 - 输入 API 必需的标识符、标签和自定义事件。 - Details API 补充内容的展开控件及标题规范。 - 排版 字体系列和阅读字号比例。 - 间距 已发布的间距系统。 - 术语与包的适用范围 当前包命名空间和使用场景。 ## Canada.ca 设计系统 相关资源 ### CFPB 设计系统 实现 CFPB 的编辑网格、现行排版规范和原生 Expandables，并提供可用的阅读工作表、经过验证的软件包 API，以及明确的品牌标识使用边界。 ### CMS 设计系统 使用带版本的主题变量、真实的 Review 组件 API，以及可正常运行的编辑与审核流程，实现 CMS Core，并保留用户答案和焦点。 ### 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/) - [Details 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/)