Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño Ontario.
Crea una guía extensa al estilo de Ontario con tipografía real, valores publicados de espaciado y color, comportamiento nativo de acordeón y el código fuente completo de la versión correspondiente.
Ontario 9.1.0: CSS publicado y script de acordeón, fuentes locales incluidas, contenido original y controlador para la apertura mediante enlaces. · Referencia de implementación
02
Sistema de diseño Ontario Referencia de diseño
Se verificaron localmente los tokens de diseño y complete-styles de Ontario 9.1.0, las rutas de exportación reales del paquete, el SCSS del acordeón y el script publicado.
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-greyscale-black
#1A1A1A
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-greyscale-greyscale5
#F2F2F2
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-greyscale-greyscale20
#CCCCCC
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-system-link
#0066CC
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-system-link-hover
#00478F
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-system-link-active
#002142
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-system-link-visited
#551A8B
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-system-focus
#009ADB
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-system-alert
#CD0000
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-system-success
#118847
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
--ontario-colour-system-information
#1080A6
Exportación real de tokens de la versión 9.1.0. El componente compilado CSS asigna valores a estos roles; importar un token por sí solo no crea un componente.
Valor del token publicado; los valores de cuadrícula sin unidad describen el sistema de origen y deben interpretarse según la implementación de cuadrícula pertinente.
--ontario-font-sizes-standard-body-text
1rem
Valor del token publicado; los valores de cuadrícula sin unidad describen el sistema de origen y deben interpretarse según la implementación de cuadrícula pertinente.
--ontario-font-sizes-large
1.25rem
Valor del token publicado; los valores de cuadrícula sin unidad describen el sistema de origen y deben interpretarse según la implementación de cuadrícula pertinente.
--ontario-font-sizes-x-large
1.5rem
Valor del token publicado; los valores de cuadrícula sin unidad describen el sistema de origen y deben interpretarse según la implementación de cuadrícula pertinente.
--ontario-breakpoints-small
40em
Valor del token publicado; los valores de cuadrícula sin unidad describen el sistema de origen y deben interpretarse según la implementación de cuadrícula pertinente.
--ontario-breakpoints-medium
73em
Valor del token publicado; los valores de cuadrícula sin unidad describen el sistema de origen y deben interpretarse según la implementación de cuadrícula pertinente.
--ontario-grid-columns-total-columns
12
Valor del token publicado; los valores de cuadrícula sin unidad describen el sistema de origen y deben interpretarse según la implementación de cuadrícula pertinente.
--ontario-grid-columns-row-width
1152
Valor del token publicado; los valores de cuadrícula sin unidad describen el sistema de origen y deben interpretarse según la implementación de cuadrícula pertinente.
--ontario-grid-columns-column-gutter
32
Valor del token publicado; los valores de cuadrícula sin unidad describen el sistema de origen y deben interpretarse según la implementación de cuadrícula pertinente.
03
Guía completa de sistema de diseño Ontario
Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.
DESIGN-ontario.md
Orientación completa, un punto de partida para la implementación y enlaces al código fuente.
Exportaciones del paquete sistema de diseño Ontario y estilos de componentes
Usa deliberadamente el paquete completo de estilos
El ejemplo fija @ongov/ontario-design-system-complete-styles en la versión 9.1.0 y usa su script publicado para expandir y contraer. Se trata de una implementación de HTML/CSS, no del entorno de ejecución independiente de componentes web de Ontario. El mapa de exportaciones del paquete expone el tema compilado en styles/css/compiled/ontario-theme.min.css; una importación profunda con un prefijo dist añadido arbitrariamente falla en un empaquetador moderno.
Incluye las reglas del acordeón
En el paquete 9.1.0 inspeccionado, el tema compilado no incluye los selectores del acordeón que usa este ejemplo. Por eso, la página incluye reglas compiladas a partir del archivo ontario-accordion.scss del propio paquete, en el CSS proporcionado. El script se copia del directorio publicado dist/scripts porque esa ruta profunda JavaScript no está exportada. Estos son requisitos concretos de compilación, no detalles visuales opcionales.
Tipografía y jerarquía de Ontario sistema de diseño Ontario
Mantén la combinación tipográfica prevista
El tema publicado proporciona Raleway Modified para los encabezados y Open Sans para el texto habitual. La vista previa incluye los estilos normales 400 y 700 que usa la página. Así se conservan las formas distintivas de los encabezados sin depender de fuentes remotas. La tipografía debe revisarse cuando se hayan cargado las fuentes: la representación con fuentes alternativas puede cambiar tanto los saltos de línea como el peso relativo de los encabezados del acordeón.
Facilita la lectura rápida de las etapas
El título presenta una tarea, la introducción explica cómo usar la guía y tres encabezados de etapa establecen una secuencia clara. Los párrafos y las listas complementarios aparecen dentro de cada panel. La nota adyacente permanece visible porque la información esencial sobre cómo unirse y acceder no debería depender de que alguien descubra un panel oculto. La jerarquía forma parte del modelo de contenido; no es motivo para convertir cada frase en un encabezado.
Roles de color y affordances de los componentes de sistema de diseño Ontario
Asigna funciones distintas a los enlaces y al foco
El color publicado para los enlaces es #0066CC, con colores independientes para los estados hover, active y visited. El foco usa #009ADB. El acordeón combina una etiqueta visible, un icono direccional y un estado expandido; su comportamiento no se explica solo con texto azul. El borde gris distingue las etapas sin convertir cada párrafo en una tarjeta independiente.
Usa la progresión de espaciado publicada
La tabla de espaciado va de cero a cinco rem, con pasos intermedios con nombre. El ejemplo aplica una composición propia de dos columnas alrededor de las reglas oficiales del componente. El punto de cambio a 760px es una decisión de composición para esta guía integrada y no se presenta como un nuevo punto de ruptura de Ontario. Los puntos de ruptura oficiales se documentan por separado en la tabla de referencia.
Estructura y estado del acordeón de sistema de diseño Ontario
Asocia cada botón con su contenido
Cada etapa tiene un encabezado que contiene un botón real. Su atributo aria-controls apunta a una sección de contenido con un identificador único, y aria-expanded indica si esa sección está abierta. El contenido hace referencia al botón mediante aria-labelledby. El script nativo coordina las clases del componente y aria-hidden cuando el panel se abre y se cierra. Un ID duplicado rompería esta relación aunque la disposición visual pareciera correcta.
Usa ID únicos para los botones y el contenido.
Mantén el encabezado alrededor de un botón interactivo real.
Adapta el marcado al comportamiento de visibilidad del script versionado.
Mantén sincronizados los controles de todas las etapas
Apertura mediante enlaces y contenido esencial de sistema de diseño Ontario
Abre una etapa con su botón real
Los enlaces de la barra lateral identifican una etapa y, si está cerrada, activan su botón nativo. Después de abrirla, enfocan el botón. Así, el atributo expanded del botón, la clase del encabezado y la visibilidad del contenido cambian en la misma transición. El controlador adicional es código de la aplicación; se incluye completo para que el lector pueda reproducir el comportamiento.
Redacta información complementaria que valga la pena desplegar
Las tres etapas redactadas cubren la preparación, los materiales y el seguimiento de un taller pequeño. Cada una incluye acciones específicas y un párrafo que explica los límites del ejemplo. Una invitación real debe mostrar directamente su propósito, las opciones de acceso y los datos para participar. Este patrón organiza una guía extensa; no debería ocultar información esencial solo para que la página parezca más corta.
Código fuente completo y verificación de sistema de diseño Ontario
Reproduce el ejemplo versionado
Crea un proyecto Vite vanilla, instala el paquete complete-styles fijado y copia su script para expandir y contraer en src. Guarda los archivos main.js y ontario.css proporcionados, y conserva el elemento raíz de montaje. El CSS incluye las reglas oficiales del acordeón compiladas para esta versión, además de reglas de diseño originales claramente identificadas. Esta implementación de HTML no requiere registrar componentes ni usar un servicio de backend.
Instala el paquete complete-styles fijado.
Copia su script para expandir y contraer y guarda el archivo de entrada completo y CSS.
Abre todos los paneles; después, contrae una etapa y vuelve a abrirla mediante su enlace.
Revisa el foco del teclado, los atributos expanded y la disposición en teléfonos.
Revisa el comportamiento de los enlaces y de los controles de grupo
Pruebe a abrir cada sección, contraerlas todas y, luego, usar un enlace de la barra lateral para volver a abrir la sección intermedia. Confirme que el estado expandido del botón coincida con el contenido visible. Repita la prueba con el ancho de un teléfono, donde la barra lateral aparece después de la guía. La comprobación local también confirma que se cargan los recursos de fuentes, que la página no tiene desbordamiento horizontal y que el script nativo no genera errores en el navegador.
Ejemplos de componentes del sistema de diseño sistema de diseño Ontario
main.js — guía completa del taller
Contenido original completo, importación del script publicado y comportamiento de apertura mediante enlaces.
javascript
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()}));
Para esta versión fijada, se necesitan tanto el tema compilado como la hoja de estilos específica del componente de acordeón.
04
Configuración del agente sistema de diseño Ontario
Punto de partida para la implementación
La vista previa usa el mismo script publicado para el acordeón y los recursos de fuentes locales. El ejemplo no carga la biblioteca independiente de componentes web.
sh
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/[email protected]
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
Una instrucción para tu proyecto
Instrucción para el agente
Cree la guía del taller de Ontario con complete-styles 9.1.0 y el script de acordeón correspondiente. Incluya el acordeón específico del componente CSS, las fuentes auténticas Raleway Modified/Open Sans, los ID del contenido de los botones accesibles y un comportamiento sincronizado de expansión y contracción. Mantenga visible la información esencial y haga que los enlaces a las secciones activen los botones nativos.
05
Fuentes y alcance sistema de diseño Ontario
Una guía de taller creada por OpenDesign que utiliza los estilos de Ontario 9.1.0 y su script publicado para expandir y contraer secciones. El contenido y la composición de la página son originales; no es una página oficial de servicios.
