# Sistema de design Ontario

## Prévia da interface sistema de design Ontario

Abra todas as etapas, recolha-as e vá diretamente para uma seção complementar.

## Referência de design sistema de design Ontario

Tokens do sistema de design Ontario e complete-styles 9.1.0; caminhos reais de exportação do pacote, SCSS do acordeão e script publicado verificados localmente.

### Cores de texto, superfícies e interações

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --ontario-colour-greyscale-white | #FFFFFF | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-greyscale-black | #1A1A1A | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-greyscale-greyscale5 | #F2F2F2 | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-greyscale-greyscale20 | #CCCCCC | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-system-link | #0066CC | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-system-link-hover | #00478F | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-system-link-active | #002142 | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-system-link-visited | #551A8B | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-system-focus | #009ADB | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-system-alert | #CD0000 | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-system-success | #118847 | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
| --ontario-colour-system-information | #1080A6 | Exportação real dos tokens da versão 9.1.0. O componente CSS compilado associa essas funções a valores; importar um token, por si só, não cria um componente. |
### Escala de espaçamento

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --ontario-spacing-0 | 0 | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
| --ontario-spacing-1 | 0.25rem | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
| --ontario-spacing-2 | 0.5rem | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
| --ontario-spacing-3 | 0.75rem | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
| --ontario-spacing-4 | 1rem | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
| --ontario-spacing-5 | 1.5rem | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
| --ontario-spacing-6 | 2rem | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
| --ontario-spacing-7 | 2.5rem | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
| --ontario-spacing-8 | 3rem | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
| --ontario-spacing-9 | 4rem | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
| --ontario-spacing-10 | 5rem | Espaçamento publicado em rem; spacing-5 equivale a 1.5rem, portanto o sufixo não representa diretamente um valor em pixels. |
### Referência de tipografia e grade

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --ontario-font-sizes-small | 0.875rem | Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão. |
| --ontario-font-sizes-standard-body-text | 1rem | Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão. |
| --ontario-font-sizes-large | 1.25rem | Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão. |
| --ontario-font-sizes-x-large | 1.5rem | Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão. |
| --ontario-breakpoints-small | 40em | Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão. |
| --ontario-breakpoints-medium | 73em | Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão. |
| --ontario-grid-columns-total-columns | 12 | Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão. |
| --ontario-grid-columns-row-width | 1152 | Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão. |
| --ontario-grid-columns-column-gutter | 32 | Valor do token publicado; os valores de grade sem unidade descrevem o sistema de origem e devem ser interpretados conforme a implementação da grade em questão. |
## Guia completo sistema de design Ontario

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## Exportações de pacotes e estilos de componentes sistema de design Ontario

### Use o pacote de estilos completo de forma intencional

> O exemplo fixa @ongov/ontario-design-system-complete-styles 9.1.0 e usa o script publicado para expandir/recolher. Esta é uma implementação HTML/CSS, não o runtime separado de web components do Ontario. O mapa de exportações do pacote disponibiliza o tema compilado em styles/css/compiled/ontario-theme.min.css; uma importação interna presumida com um prefixo dist adicional falha em um bundler moderno.

### Inclua as regras do acordeão

No pacote 9.1.0 inspecionado, o tema compilado não inclui os seletores do acordeão usados neste exemplo. Por isso, a página inclui regras compiladas a partir do próprio ontario-accordion.scss do pacote, fornecido em CSS. O script é copiado do diretório dist/scripts publicado, pois esse caminho interno JavaScript não é exportado. São requisitos concretos da compilação, não ajustes visuais opcionais.

## Tipografia e hierarquia do Ontario sistema de design Ontario

### Preserve a combinação tipográfica pretendida

O tema publicado fornece Raleway Modified para títulos e Open Sans para o texto comum. A prévia inclui as variantes normais 400 e 700 usadas na página. Isso mantém as formas características dos títulos sem depender de fontes remotas. A tipografia deve ser avaliada depois que as fontes forem carregadas: a renderização com fontes alternativas pode alterar tanto a quebra de linhas quanto o peso relativo dos títulos do acordeão.

### Facilite a leitura rápida das etapas

O título apresenta uma tarefa, a introdução explica como usar o guia e os títulos das três etapas formam uma sequência clara. Os parágrafos e as listas complementares ficam dentro de cada painel. A observação ao lado permanece visível, pois as informações essenciais sobre participação e acesso não devem depender de alguém descobrir um painel oculto. A hierarquia faz parte do modelo de conteúdo; isso não significa que cada frase deva virar um título.

## Funções das cores e recursos visuais dos componentes sistema de design Ontario

### Diferencie as funções dos links e do foco

A cor de link exportada é #0066CC, com cores distintas para os estados de hover, ativo e visitado. O foco usa #009ADB. O acordeão combina um rótulo visível, um ícone direcional e o estado expandido; o texto azul, por si só, não explica seu comportamento. A borda cinza diferencia as etapas sem transformar cada parágrafo em um cartão separado.

### Use a progressão de espaçamento publicada

A tabela de espaçamento vai de zero a cinco rem, com etapas intermediárias nomeadas. O exemplo aplica um layout de duas colunas definido especificamente para ele em torno das regras oficiais do componente. O ponto de colapso em 760px é uma escolha de composição para este guia incorporado, não um novo ponto de quebra do Ontario. Os pontos de quebra oficiais estão registrados separadamente na tabela de referência.

## Estrutura e estado do acordeão sistema de design Ontario

### Associe cada botão ao seu conteúdo

Cada etapa tem um título que contém um botão de verdade. O aria-controls aponta para uma única seção de conteúdo com ID exclusivo, e o aria-expanded indica se a seção está aberta. O conteúdo referencia o botão por meio de aria-labelledby. O script nativo coordena as classes do componente e o aria-hidden ao abrir e fechar o painel. IDs duplicados quebrariam essa relação, mesmo que o layout parecesse correto.

- Use IDs exclusivos para os botões e o conteúdo.

- Mantenha o título em torno de um botão interativo real.

- Faça a marcação corresponder ao comportamento de visibilidade do script versionado.

### Mantenha sincronizados os controles de todas as etapas

Expandir tudo e Recolher tudo atuam em conjunto nos três painéis das etapas. Cada painel continua podendo ser operado de forma independente. O exemplo segue a marcação compatível com o script fixado, sem misturá-la com marcações mais recentes do site, como o comportamento de conteúdo oculto até ser encontrado, que o script fixado não remove. Uma página de documentação pode evoluir independentemente de uma versão instalada; o exemplo executável precisa corresponder ao pacote real.

## Sistema de design Ontario Abertura vinculada e conteúdo essencial

### Abra uma etapa pelo botão correspondente

Os links da barra lateral identificam uma etapa e, se ela estiver fechada, acionam o botão nativo correspondente. Depois de abrir a etapa, eles movem o foco para o botão. Assim, o atributo expanded do botão, a classe do título e a visibilidade do conteúdo mudam na mesma transição. O manipulador adicional faz parte do código da aplicação; ele é incluído por inteiro para que seja possível reproduzir esse comportamento.

### Escreva informações complementares que valha a pena expandir

As três etapas criadas abordam preparação, materiais e acompanhamento de uma pequena oficina. Cada uma contém ações específicas e um parágrafo que explica os limites do exemplo. Um convite real ainda precisa apresentar diretamente seu propósito, as condições de acessibilidade e as informações para participar. Esse padrão organiza um guia mais extenso; não deve ocultar informações essenciais só para deixar a página aparentemente mais curta.

## Sistema de design Ontario Código-fonte completo e verificação

### Recrie o exemplo versionado

Crie um projeto Vite vanilla, instale o pacote complete-styles fixado e copie o script de expandir/recolher para src. Salve os arquivos main.js e ontario.css fornecidos, preservando o elemento de montagem raiz. O CSS inclui as regras oficiais do acordeão compiladas para esta versão, além de regras originais de layout claramente identificadas. Esta implementação de HTML não requer registro de componentes nem serviço de back-end.

1. Instale o pacote complete-styles fixado.

2. Copie o script de expandir/recolher e salve o arquivo de entrada completo e o CSS.

3. Abra todos os painéis; em seguida, recolha-os e reabra uma etapa pelo link correspondente.

4. Confira o foco do teclado, os atributos expanded e o layout para celular.

### Confira os comportamentos de navegação por links e em grupo

Teste a abertura de todas as etapas, recolha tudo e use um link da barra lateral para reabrir a etapa do meio. Confirme se o estado expanded do botão corresponde ao conteúdo visível. Repita o teste na largura de tela de um celular, onde a barra lateral fica abaixo do guia. A verificação local também confirma que os arquivos de fontes carregam, que a página não tem rolagem horizontal e que o script nativo não gera erros no navegador.

## Sistema de design Ontario Exemplos de componentes do sistema de design

### main.js — guia completo da oficina

Conteúdo original completo, importação do script publicado e comportamento de abertura por link.

```
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()}));
```

Referência de código

- Copie o script publicado usando o comando de configuração. Os links acionam o botão nativo para manter o estado ARIA sincronizado.

### ontario.css — acordeão compilado e layout original

Regras oficiais do acordeão da versão 9.1.0, seguidas de uma composição responsiva original.

```
/* 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}}
```

Referência de código

- O tema compilado e a folha de estilos específica do componente acordeão são necessários para esta versão fixada.

## Sistema de design Ontario Configuração do agente

### Ponto de partida para implementação

A prévia executa o mesmo script publicado do acordeão com arquivos de fontes locais. O exemplo não carrega a biblioteca separada de componentes 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
```

### Um prompt para seu projeto

```
Crie o guia da oficina de Ontario com complete-styles 9.1.0 e o script de acordeão correspondente. Inclua o CSS específico do componente acordeão, as fontes genuínas Raleway Modified/Open Sans, IDs acessíveis para o conteúdo dos botões e o comportamento sincronizado de expandir/recolher. Mantenha visíveis as informações essenciais e encaminhe os links das etapas pelos botões nativos.
```

## Sistema de design Ontario Fontes e escopo

Guia de oficina criado com OpenDesign, usando os estilos do Ontario 9.1.0 e o script publicado de expandir/recolher. O conteúdo e a composição da página são originais; esta não é uma página oficial de serviço.

- Orientações sobre acordeões Conteúdo, marcação e modelo de expansão.

- Configuração do pacote Funções dos pacotes e opções de integração.

- Sistema de cores Cores de interação e semânticas.

- Código-fonte público versionado Estilos publicados, exportações de tokens e implementação do acordeão.

## Sistema de design Ontario Recursos relacionados

### Poncho

Inspecione a grade Bootstrap 3 de Poncho, as cores semânticas das ações e os painéis de serviço totalmente clicáveis em um diretório de atividades funcional.

### Queensland Government sistema de design

Explore a implementação de Bootstrap de Queensland em um seletor de recursos ilustrado e completo, com funções de tema reais, estilo nativo de caixas de seleção e um diálogo acessível de revisão.

### Ripple

Explore as funções de cor reais de Ripple, sua escala de espaçamento de 14 etapas e referências tipográficas responsivas em uma linha do tempo completa de oficina, com exibição progressiva de informações, progresso e foco no próximo passo pelo teclado.


- [Referência de implementação](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Fonte](https://github.com/ongov/ontario-design-system)
- [Referência de código](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Referência de código](https://github.com/ongov/ontario-design-system)
- [Orientações sobre acordeões Conteúdo, marcação e modelo de expansão.](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Configuração do pacote Funções dos pacotes e opções de integração.](https://designsystem.ontario.ca/docs/documentation/develop/npm-packages.html)
- [Sistema de cores Cores de interação e semânticas.](https://designsystem.ontario.ca/components/detail/colours.html)
- [Código-fonte público versionado Estilos publicados, exportações de tokens e implementação do acordeão.](https://github.com/ongov/ontario-design-system)