# Ontario 设计系统

## Ontario 设计系统 界面预览

展开所有阶段、收起所有阶段，并直接跳转至辅助说明部分。

## Ontario 设计系统 设计参考

Ontario 设计令牌与完整样式 9.1.0；已在本地核实实际的软件包导出路径、折叠面板 SCSS 和已发布脚本。

### 文本、界面表面与交互颜色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --ontario-colour-greyscale-white | #FFFFFF | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-greyscale-black | #1A1A1A | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-greyscale-greyscale5 | #F2F2F2 | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-greyscale-greyscale20 | #CCCCCC | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-system-link | #0066CC | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-system-link-hover | #00478F | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-system-link-active | #002142 | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-system-link-visited | #551A8B | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-system-focus | #009ADB | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-system-alert | #CD0000 | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-system-success | #118847 | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
| --ontario-colour-system-information | #1080A6 | 实际的 9.1.0 令牌导出项。编译后的组件 CSS 会将这些角色解析为具体值；单独导入令牌并不会生成组件。 |
### 间距比例

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --ontario-spacing-0 | 0 | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
| --ontario-spacing-1 | 0.25rem | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
| --ontario-spacing-2 | 0.5rem | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
| --ontario-spacing-3 | 0.75rem | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
| --ontario-spacing-4 | 1rem | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
| --ontario-spacing-5 | 1.5rem | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
| --ontario-spacing-6 | 2rem | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
| --ontario-spacing-7 | 2.5rem | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
| --ontario-spacing-8 | 3rem | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
| --ontario-spacing-9 | 4rem | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
| --ontario-spacing-10 | 5rem | 已发布的 rem 间距；spacing-5 为 1.5rem，因此后缀并非对应的直接像素值。 |
### 字体与网格参考

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --ontario-font-sizes-small | 0.875rem | 已发布的令牌值；无单位的网格值描述源系统，必须结合相应的网格实现来解读。 |
| --ontario-font-sizes-standard-body-text | 1rem | 已发布的令牌值；无单位的网格值描述源系统，必须结合相应的网格实现来解读。 |
| --ontario-font-sizes-large | 1.25rem | 已发布的令牌值；无单位的网格值描述源系统，必须结合相应的网格实现来解读。 |
| --ontario-font-sizes-x-large | 1.5rem | 已发布的令牌值；无单位的网格值描述源系统，必须结合相应的网格实现来解读。 |
| --ontario-breakpoints-small | 40em | 已发布的令牌值；无单位的网格值描述源系统，必须结合相应的网格实现来解读。 |
| --ontario-breakpoints-medium | 73em | 已发布的令牌值；无单位的网格值描述源系统，必须结合相应的网格实现来解读。 |
| --ontario-grid-columns-total-columns | 12 | 已发布的令牌值；无单位的网格值描述源系统，必须结合相应的网格实现来解读。 |
| --ontario-grid-columns-row-width | 1152 | 已发布的令牌值；无单位的网格值描述源系统，必须结合相应的网格实现来解读。 |
| --ontario-grid-columns-column-gutter | 32 | 已发布的令牌值；无单位的网格值描述源系统，必须结合相应的网格实现来解读。 |
## Ontario 设计系统 完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## Ontario 设计系统 软件包导出项与组件样式

### 有计划地使用完整样式软件包

> 示例固定使用 @ongov/ontario-design-system-complete-styles 9.1.0，并采用其已发布的展开/收起脚本。这是 HTML/CSS 实现，并非独立的 Ontario Web Components 运行时。该软件包的导出映射通过 styles/css/compiled/ontario-theme.min.css 暴露编译后的主题；在现代打包工具中，误加 dist 前缀的深层导入路径会失效。

### 加入折叠面板样式规则

在检查过的 9.1.0 软件包中，编译后的主题不包含本示例使用的折叠面板选择器。因此，页面加入了由软件包自带的 ontario-accordion.scss 编译而成的规则，并随附于 CSS。脚本从已发布的 dist/scripts 目录复制而来，因为该深层 JavaScript 路径未导出。这些是明确的构建要求，并非可有可无的视觉润色。

## Ontario 设计系统 Ontario 字体排印与层级

### 保留预期的字体搭配

已发布的主题为标题提供 Raleway Modified，为普通文本提供 Open Sans。预览打包了页面所用的常规体 400 和 700 字重。这样既能保留独特的标题字形，也无需依赖远程字体。应在字体加载后检查排版：回退字体可能会改变换行方式以及折叠面板标题的相对字重。

### 让各阶段一目了然

标题引出一项任务，导语说明指南的使用方法，三个阶段标题则呈现清晰的顺序。辅助段落和列表放在各自的面板内。相邻的提示信息始终可见，因为重要的加入方式和无障碍信息不应依赖用户发现隐藏面板。层级是内容模型的一部分，并不意味着每句话都要做成标题。

## Ontario 设计系统 颜色角色与组件交互提示

### 区分链接与焦点的作用

导出的链接颜色为 #0066CC，并为悬停、激活和已访问状态分别设置颜色。焦点使用 #009ADB。折叠面板通过可见标签、方向图标和展开状态共同传达信息；仅靠蓝色文字无法说明其行为。灰色边界用于区分各阶段，不会让每个段落都变成独立卡片。

### 采用已发布的间距梯度

间距表从零到五 rem，并包含命名的中间步进值。示例在官方组件规则之外采用了自定义双栏布局。其 760px 折叠断点是此嵌入式指南的版面设计决策，并非新增的 Ontario 断点。官方断点另列于参考表中。

## Ontario 设计系统 折叠面板结构与状态

### 将每个按钮与其内容关联

每个阶段都有一个包含真实按钮的标题。按钮的 aria-controls 指向一个具有唯一 ID 的内容区段，aria-expanded 则描述该区段是否展开。内容通过 aria-labelledby 引用按钮。面板展开和收起时，原生脚本会同步组件类名与 aria-hidden。即使视觉布局看似正确，重复的 ID 也会破坏这种关联。

- 为按钮和内容设置唯一 ID。

- 在真实交互按钮外保留标题元素。

- 使标记符合指定版本脚本的可见性行为。

### 保持全部阶段控件同步

“全部展开”和“全部收起”会一并控制三个阶段面板。每个面板仍可单独操作。示例遵循固定版本脚本支持的标记方式，不与更新版网站标记混用，例如该固定版本脚本不会移除的 hidden-until-found 行为。文档页面可以独立于已安装版本更新；可运行示例则必须与实际软件包相符。

## Ontario 设计系统 链接式展开与重要内容

### 通过对应的按钮展开阶段

侧边栏链接会先定位到某个阶段，再在该阶段处于收起状态时触发其原生按钮。展开后，链接会将焦点移至该按钮。这样一来，按钮的展开属性、标题类名和内容可见性便会在同一次状态转换中保持一致。额外的处理程序属于应用代码；这里完整列出，便于读者复现该行为。

### 提供值得展开查看的辅助信息

这三个已编写的阶段涵盖小型工作坊的准备、材料和后续跟进。每个阶段都包含具体操作，以及一段说明示例适用范围的文字。实际邀请仍应直接说明活动目的、无障碍安排和参与方式。此模式用于组织较长的指南；不应仅为了让页面显得更短而隐藏重要信息。

## Ontario 设计系统 完整源码与验证

### 复现带版本的示例

创建一个 Vite vanilla 项目，安装指定版本的 complete-styles 包，并将其展开/折叠脚本复制到 src。保存提供的 main.js 和 ontario.css，并保留根挂载元素。CSS 包含为此版本编译的官方手风琴规则，以及明确标注的原创布局规则。此 HTML 实现无需注册组件或后端服务。

1. 安装指定版本的 complete-styles 包。

2. 复制其展开/折叠脚本，并保存完整入口文件和 CSS。

3. 展开所有面板，然后通过链接折叠并重新展开一个阶段。

4. 检查键盘焦点、展开属性和手机布局。

### 检查链接与分组行为

测试展开每个阶段、全部折叠，然后使用侧边栏链接重新展开中间阶段。确认按钮的展开状态与可见内容一致。在手机宽度下重复测试，此时侧边栏会显示在指南后方。本地检查还会确认字体资源已加载、页面没有水平溢出，并且原生脚本未触发浏览器错误。

## Ontario 设计系统组件示例

### main.js — 完整工作坊指南

完整原创内容、已发布脚本的导入方式，以及通过链接展开内容的行为。

```
import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css';
import './ontario-expand-collapse.js';
import './ontario.css';
const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']];
const icon=(dir)=>`<svg class="ontario-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="${dir==='up'?'M6 15l6-6 6 6':'M6 9l6 6 6-6'}" fill="none" stroke="currentColor" stroke-width="2.4"/></svg>`;
document.getElementById('root').innerHTML=`<main><p class="kicker">ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Run an inclusive workshop</h1><p class="ontario-lead-statement">Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.</p><div class="layout"><section aria-labelledby="guide-heading"><h2 id="guide-heading">Workshop stages</h2><div class="ontario-accordions__container"><div class="ontario-accordion__controls"><button class="ontario-accordion__button--expand-all" aria-expanded="false"><span class="ontario-accordion--expand-open-all">Expand all</span><span class="ontario-accordion--expand-close-all">Collapse all</span></button></div>${topics.map(([title,intro,items,note],i)=>`<div class="ontario-accordion" id="stage-${i}"><h3 class="ontario-accordion-heading"><button class="ontario-accordion__button" id="stage-button-${i}" aria-controls="stage-content-${i}" aria-expanded="false" data-toggle="ontario-collapse"><span class="ontario-accordion__button-icon--close">${icon('up')}</span><span class="ontario-accordion__button-icon--open">${icon('down')}</span>${title}</button></h3><section class="ontario-accordion__content" id="stage-content-${i}" aria-labelledby="stage-button-${i}" aria-hidden="true" data-toggle="ontario-expander-content"><p>${intro}</p><ul>${items.map(x=>'<li>'+x+'</li>').join('')}</ul><p>${note}</p></section></div>`).join('')}</div></section><aside><h2>Keep the essentials visible</h2><p>Session purpose, access arrangements and joining instructions belong in the main invitation. Do not hide them inside a collapsed guide.</p><h3>Jump to a stage</h3><ul class="jump">${topics.map(([title],i)=>`<li><a class="stage-link" href="#stage-${i}">${title}</a></li>`).join('')}</ul><p class="note">Published Ontario 9.1.0 styles and expand/collapse script, with original content and composition. This is not an official service page.</p></aside></div></main>`;

// Drive linked opening through the native button so its ARIA state stays synchronized.
document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()}));
```

代码参考

- 使用 setup 命令复制已发布的脚本。链接会调用原生按钮，以保持 ARIA 状态同步。

### ontario.css — 编译后的手风琴样式与原创布局

官方 9.1.0 手风琴规则，后接原创响应式布局。

```
/* Accordion rules compiled from Ontario 9.1.0 published SCSS. */
.ontario-accordion__button--expand-all:focus,.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid rgba(0,0,0,0);transition:box-shadow .1s ease-in-out}.ontario-accordion__button{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-accordion__button{font-size:1.25rem;letter-spacing:.03rem;line-height:1.5;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-accordion__button{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.ontario-accordions__container{max-width:48rem;width:100%}.ontario-accordion{border-top:2px solid #ccc}.ontario-accordion:last-of-type{border-bottom:2px solid #ccc}.ontario-accordion__controls{display:flex;justify-content:flex-end}.ontario-accordion__button,.ontario-accordion__button--expand-all{background:none;border:0;box-sizing:border-box}.ontario-accordion__button--expand-all{font-size:1rem;margin-bottom:.5rem;color:#06c;cursor:pointer}.ontario-accordion__button--expand-all:focus,.ontario-accordion__button--expand-all:hover{color:#00478f;text-decoration:underline}.ontario-accordion__button--expand-all:active{color:#002142;text-decoration:underline}.ontario-accordion--expand-close-all{display:none}.ontario-accordion__controls--active .ontario-accordion--expand-close-all{display:block}.ontario-accordion__controls--active .ontario-accordion--expand-open-all{display:none}.ontario-accordion__button{display:flex;align-items:flex-start;color:#06c;cursor:pointer;padding:.75rem .5rem;text-align:left;width:100%;margin-bottom:0}.ontario-accordion__button .ontario-accordion__button-icon--close,.ontario-accordion__button .ontario-accordion__button-icon--open{margin-right:.5rem}.ontario-accordion__button .ontario-icon{width:1.75rem;height:1.75rem}.ontario-accordion__button:focus,.ontario-accordion__button:hover{background-color:hsl(0,0%,95%);color:#00478f}.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb inset}.ontario-accordion__button:active{color:#002142}.ontario-accordion__content{display:none;padding:.75rem .75rem 2rem .75rem;margin-left:0}@media screen and (min-width: 40em){.ontario-accordion__content{margin-left:2rem}}.ontario-accordion__content *{margin-top:0;max-width:48rem;width:100%}.ontario-accordion__content ul,.ontario-accordion__content ol{max-width:calc(100% - 3rem)}.ontario-accordion__content>:last-child{margin-bottom:0}.ontario-accordion__button-icon--close,.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-expander--active~.ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-accordions__container .ontario-h1,.ontario-accordions__container .ontario-h2,.ontario-accordions__container .ontario-h3,.ontario-accordions__container .ontario-h4,.ontario-accordions__container .ontario-h5,.ontario-accordions__container p,.ontario-accordions__container h1,.ontario-accordions__container h2,.ontario-accordions__container h3,.ontario-accordions__container h4,.ontario-accordions__container h5,.ontario-accordions__container h6{margin:0}

/* Original composition. */
main{max-width:1200px;padding:32px;margin:auto}.kicker{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:24ch}.ontario-lead-statement{max-width:65ch}.layout{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;margin-top:40px}aside{padding:24px;border-top:4px solid #1a1a1a;background:#f2f2f2;align-self:start}aside h2{font-size:26px;line-height:1.35;margin-top:0}aside h3{font-size:20px}.jump{padding-left:24px}.jump li{margin-bottom:16px}.note{font-size:16px;line-height:1.5}.ontario-accordion__content p+ul{margin-top:16px}.ontario-accordion__content ul+p{margin-top:16px}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}h1{font-size:36px}}
```

代码参考

- 对于此指定版本，编译后的主题和组件专用手风琴样式表都不可或缺。

## Ontario 设计系统 AI Agent 设置

### 实现起点

预览使用相同的已发布手风琴脚本，并加载本地字体资源。此示例不会加载独立的 Web 组件库。

```
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/ontario-design-system-complete-styles@9.1.0
cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js
# Replace src/main.js and add src/ontario.css. Keep <div id="root"></div>.
npm run dev
```

### 适用于你项目的提示词

```
使用 complete-styles 9.1.0 及其匹配的手风琴脚本，构建 Ontario 工作坊指南。加入组件专用的手风琴 CSS、真实的 Raleway Modified/Open Sans 字体、可访问的按钮内容 ID，以及同步的展开/折叠行为。确保重要信息始终可见，并通过原生按钮响应阶段链接。
```

## Ontario 设计系统 来源与范围

由 OpenDesign 编写的工作坊指南，采用 Ontario 9.1.0 样式及其已发布的展开/折叠脚本。内容和页面布局均为原创；这不是官方服务页面。

- 手风琴组件指南 内容、标记语言与展开模型。

- 包的配置 包的用途与集成方式。

- 色彩系统 交互色与语义色。

- 带版本的公开源码 已发布的样式、令牌导出内容与手风琴实现。

## Ontario 设计系统 相关资源

### Poncho

通过可用的活动目录，查看 Poncho 的 Bootstrap 3 网格、语义操作颜色，以及可通过完整面板区域点击的服务入口。

### Queensland Government 设计系统

通过完整的图解资源选择器，探索 Queensland 的 Bootstrap 实现，其中包含真实的主题角色、原生复选框样式和无障碍答题回顾对话框。

### Ripple

通过完整的工作坊时间线，了解 Ripple 实际的色彩用途、14 级间距比例和响应式字体参考；其中还包括渐进式披露、进度提示和用于下一步操作的键盘焦点。


- [实现参考](https://designsystem.ontario.ca/components/detail/accordions.html)
- [来源](https://github.com/ongov/ontario-design-system)
- [代码参考](https://designsystem.ontario.ca/components/detail/accordions.html)
- [代码参考](https://github.com/ongov/ontario-design-system)
- [手风琴组件指南 内容、标记语言与展开模型。](https://designsystem.ontario.ca/components/detail/accordions.html)
- [包的配置 包的用途与集成方式。](https://designsystem.ontario.ca/docs/documentation/develop/npm-packages.html)
- [色彩系统 交互色与语义色。](https://designsystem.ontario.ca/components/detail/colours.html)
- [带版本的公开源码 已发布的样式、令牌导出内容与手风琴实现。](https://github.com/ongov/ontario-design-system)