# Sistema de diseño Ontario ## Sistema de diseño Ontario Vista previa de la interfaz Abre todas las etapas, ciérralas y ve directamente a una sección de apoyo. ## 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. ### Colores de texto, superficie e interacción | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ontario-colour-greyscale-white | #FFFFFF | 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. | ### Escala de espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ontario-spacing-0 | 0 | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | | --ontario-spacing-1 | 0.25rem | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | | --ontario-spacing-2 | 0.5rem | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | | --ontario-spacing-3 | 0.75rem | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | | --ontario-spacing-4 | 1rem | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | | --ontario-spacing-5 | 1.5rem | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | | --ontario-spacing-6 | 2rem | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | | --ontario-spacing-7 | 2.5rem | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | | --ontario-spacing-8 | 3rem | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | | --ontario-spacing-9 | 4rem | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | | --ontario-spacing-10 | 5rem | Espaciado publicado en rem; spacing-5 equivale a 1.5rem, por lo que el sufijo no representa un valor directo en píxeles. | ### Referencia de tipografía y cuadrícula | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ontario-font-sizes-small | 0.875rem | 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. | ## 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. 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 Expandir todo y Contraer todo actúan conjuntamente sobre los tres paneles de etapa. Cada panel también se puede manejar de forma independiente. El ejemplo sigue el marcado compatible con el script fijado, en lugar de combinarlo con marcado más reciente del sitio web, como hidden-until-found, que el script fijado no elimina. Una página de documentación puede evolucionar independientemente de una versión instalada; el ejemplo ejecutable debe ajustarse al paquete real. ## 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. 1. Instala el paquete complete-styles fijado. 2. Copia su script para expandir y contraer y guarda el archivo de entrada completo y CSS. 3. Abre todos los paneles; después, contrae una etapa y vuelve a abrirla mediante su enlace. 4. 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. ``` 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)=>``; document.getElementById('root').innerHTML=`

ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY

Run an inclusive workshop

Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.

Workshop stages

${topics.map(([title,intro,items,note],i)=>`

`).join('')}
`; // 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()})); ``` Referencia de código - Copie el script publicado mediante el comando de configuración. Los enlaces activan el botón nativo para mantener sincronizado el estado ARIA. ### ontario.css — acordeón compilado y diseño original Reglas oficiales del acordeón de la versión 9.1.0, seguidas de la composición adaptable 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}} ``` Referencia de código - Para esta versión fijada, se necesitan tanto el tema compilado como la hoja de estilos específica del componente de acordeón. ## 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. ``` 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
. npm run dev ``` ### Una instrucción para tu proyecto ``` 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. ``` ## 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. - Orientación sobre acordeones Contenido, marcado y modelo de expansión. - Configuración del paquete Funciones del paquete y opciones de integración. - Sistema de colores Interacción y colores semánticos. - Código fuente público con versiones Estilos publicados, exportaciones de tokens e implementación del acordeón. ## Recursos relacionados sistema de diseño Ontario ### Poncho Examina la cuadrícula Bootstrap 3 de Poncho, sus colores semánticos de acción y sus paneles de servicio totalmente interactivos mediante un directorio de actividades funcional. ### Queensland Government sistema de diseño Explora la implementación de Bootstrap de Queensland mediante un selector ilustrado de recursos completo, con roles de tema reales, estilo nativo para casillas y un diálogo accesible de revisión. ### Ripple Explora los roles de color reales de Ripple, su escala de espaciado de 14 pasos y sus referencias tipográficas adaptables mediante una cronología completa de taller con divulgación progresiva, progreso y enfoque del teclado en el siguiente paso. - [Referencia de implementación](https://designsystem.ontario.ca/components/detail/accordions.html) - [Fuente](https://github.com/ongov/ontario-design-system) - [Referencia de código](https://designsystem.ontario.ca/components/detail/accordions.html) - [Referencia de código](https://github.com/ongov/ontario-design-system) - [Orientación sobre acordeones Contenido, marcado y modelo de expansión.](https://designsystem.ontario.ca/components/detail/accordions.html) - [Configuración del paquete Funciones del paquete y opciones de integración.](https://designsystem.ontario.ca/docs/documentation/develop/npm-packages.html) - [Sistema de colores Interacción y colores semánticos.](https://designsystem.ontario.ca/components/detail/colours.html) - [Código fuente público con versiones Estilos publicados, exportaciones de tokens e implementación del acordeón.](https://github.com/ongov/ontario-design-system)