# Sistema de diseño Canada.ca ## Vista previa de la interfaz de sistema de diseño Canada.ca Filtra seis temas redactados, despliega detalles nativos y recupera la interfaz cuando no hay resultados. ## Referencia de diseño de sistema de diseño Canada.ca Exportaciones CSS y contratos de componentes publicados de @gcds-core/components 1.6.0; la vista previa local incorpora @gcds-core/fonts 1.1.1. ### Color semántico y roles de interacción | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --gcds-text-primary | #333 | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-text-secondary | #595959 | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-bg-primary | #26374a | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-bg-light | #f2f2f2 | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-link-default | #1f497a | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-link-hover | #1354ec | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-link-visited | #4b248f | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-focus-background | #1354ec | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-focus-text | #fff | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-danger-text | #b3192e | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-disabled-background | #d9d9d9 | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | | --gcds-border-default | #8c8c8c | Usa el rol semántico para el texto, las superficies o los estados de interacción. El color del foco no es un acento decorativo. | ### Tipografía y ancho de lectura | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --gcds-font-h1 | 700 2.5625rem/117% "Lato",sans-serif | Exportación tipográfica publicada de CSS. Carga Lato y Noto Sans antes de evaluar la longitud de las líneas o los saltos de línea. | | --gcds-font-h2 | 700 2.4375rem/123% "Lato",sans-serif | Exportación tipográfica publicada de CSS. Carga Lato y Noto Sans antes de evaluar la longitud de las líneas o los saltos de línea. | | --gcds-font-h3 | 700 1.8125rem/137% "Lato",sans-serif | Exportación tipográfica publicada de CSS. Carga Lato y Noto Sans antes de evaluar la longitud de las líneas o los saltos de línea. | | --gcds-font-h4 | 700 1.6875rem/133% "Lato",sans-serif | Exportación tipográfica publicada de CSS. Carga Lato y Noto Sans antes de evaluar la longitud de las líneas o los saltos de línea. | | --gcds-font-text | 400 1.25rem/160% "Noto Sans",sans-serif | Exportación tipográfica publicada de CSS. Carga Lato y Noto Sans antes de evaluar la longitud de las líneas o los saltos de línea. | | --gcds-font-text-small | 400 1.125rem/155% "Noto Sans",sans-serif | Exportación tipográfica publicada de CSS. Carga Lato y Noto Sans antes de evaluar la longitud de las líneas o los saltos de línea. | | --gcds-text-character-limit | 65ch | Exportación tipográfica publicada de CSS. Carga Lato y Noto Sans antes de evaluar la longitud de las líneas o los saltos de línea. | ### Espaciado y contenedores | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --gcds-spacing-100 | 0.5rem | Usa el valor rem exportado en lugar de tratar el sufijo del token como una cantidad de píxeles. | | --gcds-spacing-150 | 0.75rem | Usa el valor rem exportado en lugar de tratar el sufijo del token como una cantidad de píxeles. | | --gcds-spacing-200 | 1rem | Usa el valor rem exportado en lugar de tratar el sufijo del token como una cantidad de píxeles. | | --gcds-spacing-300 | 1.5rem | Usa el valor rem exportado en lugar de tratar el sufijo del token como una cantidad de píxeles. | | --gcds-spacing-400 | 2rem | Usa el valor rem exportado en lugar de tratar el sufijo del token como una cantidad de píxeles. | | --gcds-spacing-600 | 3rem | Usa el valor rem exportado en lugar de tratar el sufijo del token como una cantidad de píxeles. | | --gcds-container-sm | 30rem | Usa el valor rem exportado en lugar de tratar el sufijo del token como una cantidad de píxeles. | | --gcds-container-md | 48rem | Usa el valor rem exportado en lugar de tratar el sufijo del token como una cantidad de píxeles. | | --gcds-container-lg | 62rem | Usa el valor rem exportado en lugar de tratar el sufijo del token como una cantidad de píxeles. | | --gcds-container-xl | 71.25rem | Usa el valor rem exportado en lugar de tratar el sufijo del token como una cantidad de píxeles. | ## Guía completa de sistema de diseño Canada.ca 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. ## Componentes actuales y alcance del paquete de sistema de diseño Canada.ca ### Usa el espacio de nombres actual > GC Design System es el sistema de componentes que se usa en este recurso de Canada.ca. El ejemplo fija la versión 1.6.0 de @gcds-core/components y registra los elementos personalizados independientes de entrada, detalles y botón. Algunos ejemplos antiguos pueden usar el espacio de nombres @cdssnc. Sigue la versión del paquete instalada y no mezcles código de registro de versiones diferentes. ### Mantén el estudio de contenido separado de un servicio El ejemplo presenta seis temas de preparación redactados. No incluye la firma del Gobierno de Canadá, integración de reservas ni afirmaciones sobre documentos obligatorios. Su propósito es demostrar un patrón real de contenido desplegable y buscable. Reutilizar los componentes no significa que una aplicación sea un servicio oficial ni que su contenido cumpla todos los requisitos de Canada.ca. ## Tipografía y ritmo de lectura de sistema de diseño Canada.ca ### Carga ambas familias tipográficas Los encabezados usan Lato y el texto normal, Noto Sans. El estilo de texto principal publicado para escritorio es de 1.25rem, con un interlineado del 160 %; el ancho de lectura recomendado exportado es de 65ch. Estos valores crean un ritmo de lectura mucho más abierto que el de un panel compacto. La vista previa local integra los archivos tipográficos publicados para que un error al solicitar fuentes externas no altere el resultado sin que te des cuenta. ### Respeta la sintaxis abreviada completa de la fuente La tabla de tokens incluye la sintaxis abreviada real de fuentes de CSS, no solo los tamaños nominales en píxeles. El peso, el interlineado y la familia tipográfica son importantes en conjunto. El título principal lleva un subrayado rojo corto como detalle de composición original inspirado en Canada.ca; su ancho de 72px no se presenta como un token general de espaciado de GC. En una ventana gráfica estrecha, el diseño pasa a una columna y conserva un texto principal legible. ## Color semántico y comportamiento del foco de sistema de diseño Canada.ca ### Usa los roles públicos para los estados significativos El texto principal es #333, el secundario es #595959 y el rol de superficie azul apagado es #26374a. Los enlaces, el foco y el peligro tienen roles distintos en CSS, según las exportaciones. Un enlace no se identifica solo por el cambio de color: el elemento de detalles nativo también ofrece una indicación de interacción y un estado expandido accesible. ### No elimines el estilo de foco visible El campo de entrada y los botones nativos proporcionan el comportamiento de foco de sus componentes. La aplicación CSS gestiona la composición circundante sin acceder a las raíces de shadow DOM para borrar los contornos. Al restablecer, el foco vuelve al campo de búsqueda para que quien use el teclado pueda ajustar la consulta de inmediato. Shadow DOM modifica la forma en que se aplican los estilos personalizados y las reglas de visibilidad; por eso, inspecciona el componente renderizado en lugar de suponer que los selectores habituales de elementos cubren todos los estados. ## Sistema de diseño Canada.ca Contenido de Details y prioridad de la información ### Reserva los desplegables para explicaciones complementarias Cada gcds-details nativo recibe details-title y el texto complementario en su ranura predeterminada. Las instrucciones esenciales permanecen visibles en la barra lateral. Un horario, una dirección o un requisito reales para una cita no deben estar disponibles únicamente después de expandir un panel. Los seis temas de ejemplo son deliberadamente informativos: no recopilan datos de identidad ni simulan una reserva completada. - Mantén visible la información esencial del servicio sin necesidad de expandirla. - Usa un título breve y específico para cada elemento details. - Evita los desplegables anidados, que dificultan encontrar el contenido. ### Conserva el estado de los desplegables al filtrar La aplicación crea cada elemento details una sola vez. Al filtrar, oculta su contenedor simple en lugar de destruir y volver a crear el componente. Así, un tema expandido conserva ese estado si desaparece temporalmente y vuelve a aparecer. La visibilidad del contenedor también evita depender de que los estilos internos de visualización del elemento anfitrión personalizado respeten una regla externa de ocultación. ## Sistema de diseño Canada.ca Estado de búsqueda y recuperación cuando no hay resultados ### Escucha el evento personalizado documentado gcds-input requiere label, input-id y name. Su evento gcdsInput proporciona el nuevo valor en event.detail. La aplicación compara una consulta sin espacios al principio ni al final y en minúsculas con los títulos y el texto de los temas. Un estado en vivo anuncia la cantidad visible; si no hay coincidencias, muestra un mensaje útil para continuar en lugar de dejar una zona vacía sin explicación. ### Haz que el restablecimiento sea una transición completa El botón nativo secundario borra el valor del componente, restaura las seis entradas y enfoca el campo de entrada interno. No restablece el estado de los desplegables que la persona lectora abrió antes. Esta separación hace que los estados de la consulta y de lectura sean predecibles. Una búsqueda de producción en un conjunto de datos remoto también requeriría reglas para la carga, los errores de solicitud y el orden de los resultados; este filtro local de seis elementos no necesita esas consideraciones. ## Sistema de diseño Canada.ca Integración completa de JavaScript ### Reproduce el ejemplo funcional Crea un proyecto de Vite vanilla, instala la versión fijada del paquete de componentes y sustituye la entrada por el JavaScript completo que aparece a continuación. Guarda canada.css junto a él y conserva un elemento de montaje en la raíz. Los puntos de entrada directos de elementos personalizados registran sus dependencias necesarias; el paquete CSS proporciona la capa de tokens. El código fuente incluye el conjunto de datos completo, el registro, el filtrado y el comportamiento de restablecimiento. 1. Instala la versión fijada del paquete en un proyecto de Vite vanilla. 2. Guarda la entrada completa y canada.css, y conserva el elemento de montaje en la raíz. 3. Busca una palabra sin coincidencias y verifica el mensaje para continuar. 4. Restablece, expande un tema y vuelve a filtrar para comprobar que se conserva el estado de lectura. ### Oculta los contenedores de resultados sin destruir el estado de los desplegables Coloca cada gcds-details dentro de un contenedor estándar y activa o desactiva el estado oculto de ese contenedor al filtrar. De lo contrario, las propias reglas de visualización de un elemento personalizado pueden invalidar las suposiciones de los selectores genéricos de CSS. Mantén las instancias montadas para que, al borrar la consulta, un tema expandido vuelva a aparecer en el mismo estado. La búsqueda y los desplegables son controles independientes. Lee la consulta desde event.detail del evento gcdsInput, anuncia la cantidad de resultados y deja que el elemento details nativo gestione su propio estado expandido. Al restablecer, actualiza tanto el valor del componente como el modelo de consulta y luego devuelve el foco al campo de entrada; volver a crear toda la región de resultados haría que la persona lectora perdiera su posición. ## Sistema de diseño Canada.ca Ejemplos de componentes del sistema de diseño ### main.js — filtro nativo completo de temas Entrada completa con registro de componentes, temas redactados, filtrado, conservación del estado de los desplegables y restablecimiento. ``` import {defineCustomElement as input} from '@gcds-core/components/dist/components/gcds-input.js'; import {defineCustomElement as details} from '@gcds-core/components/dist/components/gcds-details.js'; import {defineCustomElement as button} from '@gcds-core/components/dist/components/gcds-button.js'; import '@gcds-core/components/dist/gcds/gcds.css'; import './canada.css'; input();details();button(); document.getElementById('root').innerHTML=`

GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY

Prepare for an appointment

Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.

Reset filter

Preparation topics

`; const topics=[['Confirm the time','Check the time and time zone shown in a real booking confirmation. This sample does not contain a live appointment.'],['Review the location','A real service should provide an address or joining instructions. A location belongs in visible booking details, not only inside a collapsed panel.'],['Plan access needs','Ask the service about accessibility arrangements through its official contact route. This sample demonstrates disclosure behavior and does not promise a particular accommodation.'],['Check documents','Follow the actual service’s published document requirements. This authored example intentionally does not invent a list of mandatory identity documents.'],['Keep a reference','If the service provides a booking reference, keep it with your confirmation. Do not paste personal reference numbers into this public specimen.'],['Prepare questions','Write down what you want to understand. In a real service, clear preparation content can reduce the need to remember questions during the appointment.']];const $=id=>document.getElementById(id);const entries=topics.map(([title,text])=>{const el=document.createElement('gcds-details');el.setAttribute('details-title',title);const p=document.createElement('p');p.textContent=text;el.append(p);const wrapper=document.createElement('div');wrapper.append(el);$('topics').append(wrapper);return{el,wrapper,title,text}});function render(q=''){let count=0;for(const item of entries){item.wrapper.hidden=!(item.title+' '+item.text).toLowerCase().includes(q.trim().toLowerCase());if(!item.wrapper.hidden)count++}$('count').textContent=count+' of '+topics.length+' sample topics';$('empty').hidden=count>0}$('filter').addEventListener('gcdsInput',e=>render(e.detail));$('reset').addEventListener('click',()=>{$('filter').value='';render();$('filter').shadowRoot.querySelector('input')?.focus()});render(); ``` Referencia de código - Guárdalo como src/main.js con un elemento de montaje en la raíz. El paquete publicado CSS carga las URL predeterminadas de las fuentes; esta vista previa local incluye las mismas fuentes públicas. ### canada.css — composición adaptable del contenido Diseño original de la página en torno al estilo del componente nativo. ``` *{box-sizing:border-box}body{margin:0;background:white;color:var(--gcds-text-primary);font:var(--gcds-font-text)}main{padding:32px}h1{font:var(--gcds-font-h1);margin:16px 0 24px;max-width:24ch}h1:after{content:'';display:block;width:72px;height:6px;background:#a62a1e;margin-top:16px}h2{font:var(--gcds-font-h3);margin:0 0 24px}h3{font:var(--gcds-font-h4)}p{margin:0 0 24px;max-width:65ch}.eyebrow,.small{font:var(--gcds-font-text-small)}.lead{max-width:65ch}.search-row{display:flex;align-items:end;gap:24px;margin:32px 0;border-top:1px solid #ccc;padding-top:24px}.search-row gcds-input{flex:1;max-width:650px}.search-row gcds-button{margin-bottom:var(--gcds-input-margin)}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:48px}aside{background:var(--gcds-color-grayscale-50);border-left:4px solid var(--gcds-color-blue-muted);padding:24px;align-self:start}aside h2{font:var(--gcds-font-h4)}aside ol{padding-left:24px}aside li{padding-left:8px;margin:16px 0}#count{font:var(--gcds-font-text-small)}#empty{padding:24px;background:var(--gcds-color-grayscale-50)}gcds-details{display:block}gcds-details p{padding-top:8px}[hidden]{display:none!important}@media(max-width:767px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}.search-row{display:block}.search-row gcds-button{display:block;margin-top:16px}h1{font-size:2rem}aside{padding:20px}} ``` Referencia de código - El punto de quiebre del diseño y la geometría del subrayado del título son decisiones específicas de este ejemplo, no tokens oficiales adicionales. ## Sistema de diseño Canada.ca Configuración del agente ### Punto de partida para la implementación La vista previa local ejecuta los elementos personalizados con versiones fijadas; no requiere servicios remotos ni credenciales. ``` npm create vite@latest gc-topics -- --template vanilla cd gc-topics npm install npm install @gcds-core/components@1.6.0 # Replace src/main.js and add src/canada.css; keep
. npm run dev ``` ### Una instrucción para tu proyecto ``` Crea la guía de preparación de seis temas con GC Design System 1.6.0. Carga la tipografía y la capa de tokens auténticas CSS, usa componentes nativos de entrada, details y botón, conserva el estado de los desplegables al filtrar, anuncia la cantidad de resultados y proporciona un comportamiento de restablecimiento completo. Mantén visible el contenido esencial y distingue las explicaciones de ejemplo de los requisitos oficiales del servicio. ``` ## Sistema de diseño Canada.ca Fuentes y alcance Estudio de una aplicación para Canada.ca redactado con OpenDesign y basado en GC Design System 1.6.0. Los temas de ejemplo son orientaciones ficticias, no requisitos gubernamentales ni un servicio oficial de reservas. - Entrada API Identificadores obligatorios, etiquetas y eventos personalizados. - Details API Contrato del título y del contenido complementario desplegable. - Tipografía Familias tipográficas y escala de lectura. - Espaciado Sistema de espaciado publicado. - Términos y alcance del paquete Espacio de nombres del paquete actual y contexto de uso. ## Sistema de diseño Canada.ca Recursos relacionados ### CFPB sistema de diseño Implementa la cuadrícula editorial, la tipografía actual y los componentes Expandables nativos de CFPB con una hoja de trabajo de lectura funcional, API de paquetes verificadas y límites de identidad explícitos. ### CMS sistema de diseño Implementa CMS Core con variables de tema versionadas, API reales del componente Review y un flujo funcional de edición y revisión que conserva las respuestas del usuario y el foco. ### Det Fælles Designsystem Explora el tema DKFDS de Dinamarca, las escalas Sass reales y los patrones accesibles para tablas mediante una comparación completa de recursos con ordenación numérica, búsqueda enviada y recuperación del estado vacío. - [Referencia de implementación](https://design-system.canada.ca/en/components/input/code/) - [Fuente](https://design-system.canada.ca/en/styles/colour/) - [Fuente](https://design-system.canada.ca/en/styles/typography/) - [Fuente](https://design-system.canada.ca/en/styles/spacing/) - [Referencia de código](https://design-system.canada.ca/en/components/input/code/) - [Referencia de código](https://design-system.canada.ca/en/styles/typography/) - [Entrada API Identificadores obligatorios, etiquetas y eventos personalizados.](https://design-system.canada.ca/en/components/input/code/) - [Details API Contrato del título y del contenido complementario desplegable.](https://design-system.canada.ca/en/components/details/code/) - [Tipografía Familias tipográficas y escala de lectura.](https://design-system.canada.ca/en/styles/typography/) - [Espaciado Sistema de espaciado publicado.](https://design-system.canada.ca/en/styles/spacing/) - [Términos y alcance del paquete Espacio de nombres del paquete actual y contexto de uso.](https://design-system.canada.ca/en/terms-of-use/)