# Alberta 设计系统 ## Alberta 设计系统 界面预览 选择彼此独立的任务，查看进度，进行本地审阅，并清除原生控件。 ## Alberta 设计系统 设计参考 @abgov/web-components 3.0.0 中实际导出的浅色主题 CSS；未捆绑授权的 Acumin 字体。 ### 浅色主题的交互与状态角色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --goa-color-interactive-default | #006dcc | 这些值取自深色主题覆盖样式之前固定版本 3.0.0 的样式表。请根据预期状态使用语义角色。 | | --goa-color-interactive-hover | #045092 | 这些值取自深色主题覆盖样式之前固定版本 3.0.0 的样式表。请根据预期状态使用语义角色。 | | --goa-color-interactive-focus | #006dcc | 这些值取自深色主题覆盖样式之前固定版本 3.0.0 的样式表。请根据预期状态使用语义角色。 | | --goa-color-text-default | var(--goa-color-greyscale-black) | 这些值取自深色主题覆盖样式之前固定版本 3.0.0 的样式表。请根据预期状态使用语义角色。 | | --goa-color-greyscale-100 | #f2f0f0 | 这些值取自深色主题覆盖样式之前固定版本 3.0.0 的样式表。请根据预期状态使用语义角色。 | | --goa-color-emergency-default | #da291c | 这些值取自深色主题覆盖样式之前固定版本 3.0.0 的样式表。请根据预期状态使用语义角色。 | | --goa-color-success-default | #006f4c | 这些值取自深色主题覆盖样式之前固定版本 3.0.0 的样式表。请根据预期状态使用语义角色。 | | --goa-color-success-light | #d8f7e6 | 这些值取自深色主题覆盖样式之前固定版本 3.0.0 的样式表。请根据预期状态使用语义角色。 | ### 间距与圆角规格 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --goa-space-3xs | .125rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-space-2xs | .25rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-space-xs | .5rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-space-s | .75rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-space-m | 1rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-space-l | 1.5rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-space-xl | 2rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-space-2xl | 3rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-space-3xl | 4rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-border-radius-xs | .25rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-border-radius-s | .375rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-border-radius-m | .5rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | | --goa-border-radius-l | .625rem | 已发布的间距或圆角基础令牌。应用采用双栏布局的断点是自行设定的布局选择。 | ### 排版基础令牌 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --goa-font-family-sans | acumin-variable, helvetica-neue, arial, sans-serif | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-font-size-2 | .875rem | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-font-size-3 | 1rem | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-font-size-4 | 1.125rem | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-font-size-6 | 1.5rem | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-font-size-8 | 2rem | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-font-size-9 | 2.5rem | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-line-height-3 | 1.5rem | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-line-height-6 | 2.5rem | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-line-height-7 | 3rem | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-font-weight-regular | 400 | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | | --goa-font-weight-bold | 700 | 此处记录了官方导出的字体系列；公开示例有意回退到 Arial，不会重新分发受授权限制的 Acumin 字体文件。 | ## Alberta 设计系统 完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Alberta 设计系统 Web 组件与版本边界 ### 从实际运行的实现开始 > 此示例运行 @abgov/web-components 3.0.0。导入其 JavaScript 会注册自定义元素，导入 index.css 则会提供全局设计令牌层。原始 HTML API 使用 goa 前缀元素；React 示例使用 Goab 封装组件，其事件接口有所不同。不要将 React 中的 onChange 属性直接复制到原始自定义元素上。 ### 区分软件包版本与设计版本 软件包版本和组件样式版本不是同一个字段。有些控件规定了独立的 version 属性。此示例保留固定软件包版本的默认值，不会在引用另一组设计令牌值时，悄然切换样式版本。表格记录了此构建实际使用的浅色主题导出值。 ## Alberta 设计系统 角色、节奏与排版 ### 用颜色表达状态 主要操作和进度强调色使用交互默认角色。审核未通过时，显示紧急提示文字和有用的操作说明；本地审核完成后，则使用成功色作为辅助界面表面。成功色表示本地审核状态，并不代表已向政府服务提交申请。文字标签和数字计数也传达相同信息，不依赖颜色来表达。 ### 说明字体边界 已发布的字体系列以 Acumin 开头，样式表还包含托管在外部的字体声明。预览使用明确指定的 Arial 回退字体，并移除这些远程字体请求；它不会重新分发 Acumin。设计令牌参考保留了真实的字体系列名称，以便获授权的服务加载已批准的品牌字体。从回退字体切换到授权字体后，请重新检查文本换行情况。 ## Alberta 设计系统 复选框标签与说明 ### 彼此独立的任务使用独立选项 四个原生 goa-checkbox 控件用于表示可按任意顺序审核的准备事项。每个控件都有唯一名称、可见文本，以及说明其用途的描述。使用单选控件会暗示只能选择一项，不符合此任务的实际情况。实际服务必须以经过调研的说明替换虚构的准备内容。 - 为每个复选框设置稳定且唯一的名称。 - 保持可见标签简洁，描述则应具体明确。 - 只有在多选有意义时才使用独立复选框。 ### 读取自定义事件载荷 原始 Web 组件会触发 _change 事件，并在 event.detail 中包含 name、checked 和 value。应用使用 checked 布尔值更新所选索引的 Set。它不会根据标签文本推断状态，也不要求用户点击尺寸很小的内部输入框。因此，点击可见标签和使用键盘选择会触发相同的状态转换。 ## Alberta 设计系统 进度与审核状态 ### 根据所选项计算进度 计数和原生 HTML 进度元素都由同一个 Set 计算得出。选择两项时会显示四项中的两项；清除控件后，两个指示器都会归零。进度元素带有无障碍名称，旁边的状态文本则明确显示计数。此处不会模拟上传、网络请求或完成计时器。 ### 编辑后使旧的审核摘要失效 只有在至少选择了一项时，审核操作才会生成本地文本摘要。如果未选择任何项，则会显示提示信息并聚焦第一个复选框。此后每次更改复选框，都会隐藏先前的审核结果，以免它看起来像是针对新选项生成的。清除所选项时也会更新实际的原生控件，而不只是更新视觉计数。 ## Alberta 设计系统 响应式清单布局 ### 确保任务与上下文清晰易读 桌面布局将清单放在辅助进度面板旁边。窄屏时，面板会按文档顺序排在控件之后。任务标签保持易读的字号，描述会自然换行并显示在标签下方。侧边面板的蓝色线条起到克制的指引作用，不会造成另一个相互争夺注意力的操作。 ### 保留交互目标 组件库提供复选框和按钮的交互样式。应用 CSS 负责控制间距和周围的网格布局，不会替换原生的点击区域。两个操作按钮在小屏幕上可以换行。审核是主要操作；清除所选项在视觉上较次要，不会让人误以为它是实际应用中的下一步。 ## Alberta 设计系统 完整清单实现 ### 运行完整源码 创建一个 Vite vanilla 项目，安装固定版本的 web-components 软件包，并保存提供的入口文件和 CSS。保留根挂载元素。JavaScript 包含全部四项自定义任务、原生事件绑定、计算得出的计数，以及审核和重置状态转换。无需账户、私有端点或外部数据集。 1. 安装 @abgov/web-components 3.0.0，并导入 JavaScript 和 index.css。 2. 保存完整入口文件和带有根挂载元素的 alberta.css。 3. 选择多个任务并检查计算得出的进度。 4. 检查、编辑所选项，然后清除所有原生选项。 ### 将组件事件与清单规则分开 以原生 _change 事件中的 event.detail.checked 作为选择状态的唯一依据。React 封装组件的属性与原生 goa-checkbox 事件属于两套不同的接口；若在二者之间直接复制处理函数而不调整其载荷，进度显示就可能与界面上可见的复选框不同步。 清单中的“至少选择一项”属于应用层面的策略，而非复选框的内置规则。请从同一个选择集合（Set）推导条目数量、进度值和评审文本。执行“清除所选”时，除重置该 Set 外，还要重置每个自定义元素的 checked 属性。编辑某个选择时应立即作废旧评审，使其无法描述先前的选择。真实的服务流程可能允许清单未填写完整；请先确定这一策略，再把进度设为强制门禁。 ## Alberta 设计系统组件示例 ### main.js —— 完整的原生清单 涵盖全部注册逻辑、预置任务内容、选择处理以及评审与重置的状态转换。 ``` import '@abgov/web-components'; import '@abgov/web-components/index.css'; import './alberta.css'; document.getElementById('root').innerHTML=`

ALBERTA DESIGN SYSTEM / COMPONENT STUDY

Prepare a submission

Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.

Your preparation checklist

Check each item when you have reviewed it.

Review checklistClear selections
`; const labels=['Read the service instructions','Identify questions to ask','Check your own supporting information','Choose a time to complete the task'];const selected=new Set();const $=id=>document.getElementById(id);const controls=labels.map((text,i)=>{const el=document.createElement('goa-checkbox');el.setAttribute('name','step-'+i);el.setAttribute('text',text);el.setAttribute('description',['Understand the actual task before collecting information.','Record anything that needs clarification from the service.','Use the real service’s requirements, not this sample list.','Leave enough time to review the information you provide.'][i]);el.addEventListener('_change',e=>{e.detail.checked?selected.add(i):selected.delete(i);update()});$('tasks').append(el);return el});function update(){$('total').textContent=selected.size+' of 4';$('progress').value=selected.size;$('status').textContent=selected.size===4?'All sample items reviewed.':selected.size+' sample items reviewed.';$('result').hidden=true;$('error').hidden=true}$('review').addEventListener('_click',()=>{if(!selected.size){$('error').hidden=false;controls[0].shadowRoot.querySelector('input')?.focus();return}$('result-text').textContent=selected.size+' reviewed: '+[...selected].sort().map(i=>labels[i]).join('; ')+'. This is a local summary only.';$('result').hidden=false;$('result').focus()});$('reset').addEventListener('_click',()=>{selected.clear();controls.forEach(el=>el.setAttribute('checked','false'));update()}); ``` 代码参考 - 原生自定义元素使用 _change 与 _click 事件；切勿替换为 React 封装组件的回调。 ### alberta.css —— 任务布局与显式字体回退 围绕原生控件构建的原创响应式版式。 ``` main{padding:32px;max-width:1200px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.06em;font-weight:700}h1{margin:16px 0 24px}.lead{max-width:65ch}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:40px}h2{margin-top:0}goa-checkbox{display:block;margin-bottom:24px}.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}aside{padding:24px;background:var(--goa-color-greyscale-100);border-top:4px solid var(--goa-color-interactive-default);align-self:start}aside strong{display:block;font:var(--goa-typography-heading-l)}progress{display:block;width:100%;height:12px;margin:24px 0;accent-color:var(--goa-color-interactive-default)}aside li{margin:12px 0}#error{margin-top:24px;color:var(--goa-color-emergency-default)}#result{margin-top:24px;padding:24px;border-left:4px solid var(--goa-color-success-default);background:var(--goa-color-success-light)}#result h3{margin-top:0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr;gap:32px}h1{font-size:32px;line-height:1.2}} /* Public specimen font fallback; load approved Acumin only where licensed. */ :root{--goa-font-family-sans:Arial,sans-serif;--goa-font-family-mono:monospace;} ``` 代码参考 - 本地预览省略了未使用的外部字体引入。完整包的样式表可能包含外部字体声明；此处通过覆盖声明将本研究限定为 Arial。 ## Alberta 设计系统 Agent 设置 ### 实现起点 这些锁定版本的原生控件已在本地浏览器中测试，未接入提交后端。 ``` npm create vite@latest alberta-checklist -- --template vanilla cd alberta-checklist npm install npm install @abgov/web-components@3.0.0 # Replace src/main.js and add src/alberta.css. Keep
. npm run dev ``` ### 适用于你项目的提示词 ``` 使用 web-components 3.0.0、真实的语义化 CSS 角色以及明确的字体授权边界来构建 Alberta 准备清单。使用原生复选框的描述，从选择状态推导进度，拒绝空评审，在编辑后清除过时摘要并重置实际控件。所有结果均保留在本地，预置任务仅作示例说明。 ``` ## Alberta 设计系统 来源与范围 这是一项 OpenDesign 组件研究，运行 Alberta web components 3.0.0，并显式回退至 Arial 字体。预置任务均为虚构内容，不构成政府资格认定或提交要求。 - 开发者设置 包导入方式与受支持的实现方案。 - 复选框 API 原生自定义元素的属性与事件。 - 按钮 API 操作类型与组件行为。 - 公开源码 带版本号的组件实现与 CSS 导出。 ## Alberta 设计系统 相关资源 ### Amsterdam 使用 Amsterdam 真实的开源 Switch 契约，搭配完整的中性主题、无障碍标签和即时的阅读偏好设置。 ### B.C. 设计系统 使用真实的语义令牌、原生 React Aria 控件、条件性联系字段和完整的验证行为，构建一个 B.C. 风格的提醒偏好表单。 ### Canada.ca 设计系统 通过一份完整的可检索准备指南，探索 GC 设计系统的字体排印、语义化令牌与原生 Web 组件，并涵盖展开收起与空状态行为。 - [实现参考](https://design.alberta.ca/components/checkbox/) - [来源](https://github.com/GovAlta/ui-components) - [代码参考](https://design.alberta.ca/components/checkbox/) - [代码参考](https://design.alberta.ca/get-started/developers/setup/) - [开发者设置 包导入方式与受支持的实现方案。](https://design.alberta.ca/get-started/developers/setup/) - [复选框 API 原生自定义元素的属性与事件。](https://design.alberta.ca/components/checkbox/) - [按钮 API 操作类型与组件行为。](https://design.alberta.ca/components/button/) - [公开源码 带版本号的组件实现与 CSS 导出。](https://github.com/GovAlta/ui-components)