# Sistema de diseño NL ## Sistema de diseño NL Vista previa de la interfaz Cambie entre los temas originales, edite la ubicación de recogida, guarde los cambios o cancélelos sin modificar el registro. ## Sistema de diseño NL Referencia de diseño Composición concreta con una contribución: @utrecht/component-library-css 9.0.15. Los nombres públicos de tokens y las clases son API de la biblioteca examinadas; los valores numéricos y los colores marcados como «ejemplo» son ajustes originales de la aplicación, no una especificación universal de NL Design System. ### Arquitectura | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Component implementation | Utrecht CSS 9.0.15 | Una contribución seleccionada, no la única implementación de NL Design System. | | Theme boundary | Wrapper-scoped CSS custom properties | El mismo marcado semántico admite varias identidades visuales. | | Source design tokens | Design Tokens JSON standard | Las organizaciones describen sus propios estilos para reutilizarlos. | ### Token real del botón API | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --utrecht-button-min-block-size | 48px in example; 44px library fallback | Tamaño de destino explícito. | | --utrecht-button-border-radius | 4px / 8px in example themes | Geometría definida por la aplicación. | | --utrecht-button-primary-action-background-color | #005a5b / #57328c in example themes | Colores de acción originales; texto blanco. | | --utrecht-button-font-size | 1rem in example | Función tipográfica del componente. | | --utrecht-focus-outline-width | 3px in example | Configuración pública del indicador de foco. | ### Lista de datos API | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | .utrecht-data-list + .utrecht-data-list--rows | dl root | Valores semánticos con nombre. | | .utrecht-data-list__item | Key/value wrapper | Fila de cuadrícula adaptable. | | --utrecht-data-list-rows-column-min-inline-size | 12ch in example | Ancho mínimo de columna elegido para las etiquetas del comprobante. | | --utrecht-data-list-rows-column-inline-size | 45% in example | Dos columnas cuando hay espacio suficiente. | | --utrecht-data-list-rows-gap | 24px in example | Espacio entre la clave y el valor. | ## Sistema de diseño NL Guía completa del sistema de diseño 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. ## Sistema de diseño NL Elija una composición ### Un ecosistema, no un único tema > NL Design System permite explícitamente combinar contribuciones de varias organizaciones y describir el estilo propio de cada organización mediante tokens de diseño. Por tanto, la unidad práctica de adopción es una implementación de componentes seleccionada junto con un tema seleccionado. Esta página elige la implementación de la contribución de Utrecht CSS y un tema de demostración original. Esa elección no implica que Utrecht sea la implementación canónica de todos los componentes de NL Design System. Ofrece al lector una forma reproducible de empezar sin inventar una fuente nacional, un color azul ni una escala de espaciado. El paquete nativo de CSS utilizado es @utrecht/component-library-css 9.0.15. Consulta la especificación complementaria ## Sistema de diseño NL Tokens públicos de componentes ### Mantenga los valores de la aplicación fuera de CSS El tema proporcionado establece propiedades personalizadas públicas --utrecht-* en un elemento contenedor. El botón utiliza esos valores, mientras que su clase determina la estructura del componente. Las variables que comienzan por --_utrecht- son cálculos internos de CSS según lo examinado; modificarlas directamente vincularía la aplicación a detalles de implementación. El turquesa #005a5b y el morado #57328c del ejemplo son colores originales de la aplicación. Demuestran que la marca se puede sustituir sin copiar una identidad municipal. Ambos usan texto blanco en las acciones y el tono al pasar el cursor se define por separado. Ningún color se describe como un valor oficial de token de NL Design System. ``` .example-theme { /* Original application values, not a national house style. */ --utrecht-document-font-family: Arial, sans-serif; --utrecht-button-font-size: 1rem; --utrecht-button-line-height: 1.5; --utrecht-button-font-weight: 700; --utrecht-button-border-radius: .25rem; --utrecht-button-min-block-size: 48px; --utrecht-button-padding-block-start: .75rem; --utrecht-button-padding-block-end: .75rem; --utrecht-button-padding-inline-start: 1.25rem; --utrecht-button-padding-inline-end: 1.25rem; --utrecht-button-primary-action-background-color: #005a5b; --utrecht-button-primary-action-color: #fff; --utrecht-button-primary-action-hover-background-color: #003f40; --utrecht-button-primary-action-hover-color: #fff; --utrecht-focus-outline-color: #111; --utrecht-focus-outline-width: 3px; --utrecht-focus-outline-offset: 3px; --utrecht-focus-outline-style: solid; } ``` Referencia de código Consulta la especificación complementaria ## Sistema de diseño NL Tipografía y dimensiones ### Defina las decisiones de tema que faltan La demostración define Arial, sans-serif a 18px con una altura de línea de 1.6 para facilitar la lectura del documento. El primer tema usa un encabezado de 32px y un radio de esquina de 4px en el botón; el segundo mantiene el mismo tamaño legible para el texto y usa un radio de 8px y un encabezado con serifas. Estos cambios de tema se han hecho deliberadamente visibles. El botón nativo tiene un valor alternativo de 44px para block-size cuando no se especifica su token. Nuestro tema establece 48px y un relleno explícito en los ejes de bloque y en línea. Se trata de un valor real de CSS API elegido por la aplicación, no de una dimensión supuesta para todo el ecosistema. La composición usa un ancho máximo de contenido de 56rem y espacios de 24px definidos por este ejemplo. Consulta la especificación complementaria ## Sistema de diseño NL Estructura de la lista de datos ### Una lista de definiciones para valores con nombre El comprobante usa un elemento dl con .utrecht-data-list y el modificador .utrecht-data-list--rows. Cada .utrecht-data-list__item agrupa una clave dt y un valor dd. El modificador de filas activa la cuadrícula adaptable, los espacios entre filas y los bordes; sin él, la lista de datos base no habilita esa composición. El HTML sigue siendo significativo antes de cargar cualquier tema. Nuestro comprobante muestra una ubicación de recogida, una referencia y el artículo seleccionado. No es una tabla de registros repetidos: cada clave identifica un atributo distinto de la misma solicitud. En pantallas estrechas, la clave y el valor se apilan. La aplicación define los tokens de fila para que las etiquetas de ubicación largas quepan sin recortarse. - Use dt para el nombre del atributo y dd para su valor actual. - Incluya cada par de clave y valor en el contenedor de elemento documentado. - Permita que los identificadores y los nombres largos de ubicaciones salten de línea en vez de ensanchar la página. Consulta la especificación complementaria ## Sistema de diseño NL Semántica de las acciones ### La clase de botón no implementa un flujo de trabajo .utrecht-button proporciona el componente base y .utrecht-button--primary-action selecciona el grupo de tokens de apariencia principal. El elemento nativo sigue necesitando type=button para una acción local que no deba enviar el formulario que lo contiene. La lista de datos permanece en modo de solo lectura hasta que la aplicación abre un panel de edición. El botón Cambiar ubicación de recogida de la demostración muestra un conjunto de botones de opción nativos en un fieldset. Al guardar los cambios, se actualiza el valor de la lista de definiciones y se anuncia la nueva ubicación mediante una región de estado no intrusiva. Al cancelar, se cierra el panel sin cambiar el valor guardado. Estos comportamientos forman parte del código de la aplicación; instalar un paquete de CSS por sí solo no los implementa. Consulta la especificación complementaria ## Sistema de diseño NL Cambiar de tema de forma segura ### Cambie el contenedor y conserve el registro El selector de tema cambia data-theme en el contenedor exterior. Las clases de los componentes, los valores del registro y el botón de opción seleccionado permanecen intactos. Esto demuestra de forma concreta la separación de marca blanca: el mismo comprobante y la misma interacción pueden admitir identidades visuales distintas. Aquí, el cambio de tema es una demostración de desarrollo, no una opción que un servicio público esté obligado a ofrecer. En un servicio real para varias organizaciones, elija el tema mediante una configuración de aplicación de confianza. Los valores del tema no deben alterar los requisitos de elegibilidad, la validación ni el significado de un estado. 1. Cargue una sola vez el componente de CSS con versión especificada. 2. Aplique los tokens de tema pertinentes a un elemento contenedor. 3. Represente el mismo marcado semántico del componente dentro de ese contenedor. 4. Compruebe el foco, el ajuste de línea y los colores de estado en cada tema compatible. Consulta la especificación complementaria ## Sistema de diseño NL Accesibilidad y madurez ### Evalúe la contribución seleccionada El modelo de relevo NL Design System describe cómo avanzan las contribuciones hacia estándares compartidos. La presencia de un componente en un repositorio comunitario no garantiza por sí sola que todas las composiciones estén listas para producción. Verifica la implementación seleccionada, los estados admitidos y su nivel de madurez actual en la documentación del componente. La vista previa mantiene visible una leyenda para las opciones de ubicación, anuncia el resultado guardado y devuelve el foco al botón que inició la edición. Cambiar de tema no elimina el foco. La pantalla sigue siendo utilizable con los controles de teclado nativos de los botones de opción y los indicadores de foco propios de la aplicación. Estas comprobaciones complementan las pruebas del componente de la comunidad, pero no las sustituyen. Consulta la especificación complementaria ## Instala y controla el tema sistema de diseño NL ### Una integración exclusiva de CSS Instala el paquete verificado CSS e importa dist/index.css mediante un empaquetador compatible con CSS, seguido de tu hoja de estilos del tema. La lista de datos y el botón usados aquí, que solo requieren CSS, no necesitan un proveedor React ni un inicializador de componentes JavaScript. El script original de la aplicación se encarga de editar, guardar, cancelar y cambiar de tema. El código fuente del componente incluido en el paquete está bajo la licencia EUPL-1.2. Al distribuirlo, conserva los avisos de origen y de licencia; una licencia de código no implica permiso para reutilizar el logotipo de un municipio. Este ejemplo ofrece temas originales y no incluye marcas municipales. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño sistema de diseño NL ### Tokens del tema utilizados por un botón nativo Un tema completo para el botón seleccionado. Los valores son originales; los nombres API proceden de Utrecht. ``` .example-theme { /* Original application values, not a national house style. */ --utrecht-document-font-family: Arial, sans-serif; --utrecht-button-font-size: 1rem; --utrecht-button-line-height: 1.5; --utrecht-button-font-weight: 700; --utrecht-button-border-radius: .25rem; --utrecht-button-min-block-size: 48px; --utrecht-button-padding-block-start: .75rem; --utrecht-button-padding-block-end: .75rem; --utrecht-button-padding-inline-start: 1.25rem; --utrecht-button-padding-inline-end: 1.25rem; --utrecht-button-primary-action-background-color: #005a5b; --utrecht-button-primary-action-color: #fff; --utrecht-button-primary-action-hover-background-color: #003f40; --utrecht-button-primary-action-hover-color: #fff; --utrecht-focus-outline-color: #111; --utrecht-focus-outline-width: 3px; --utrecht-focus-outline-offset: 3px; --utrecht-focus-outline-style: solid; } ``` Referencia de código ### Valores con nombre y un botón para editar Lista de definición semántica dl/dt/dd con clases de componentes de la comunidad. ```
Collection location
North library desk
Reference
DEMO-2048
``` Referencia de código ### Ejemplo independiente completo El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante HTTP. ``` NL Design System composition
Community collection · Example

CONTRIBUTOR COMPONENTS + YOUR THEME

Review your collection details

This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.

Item
Community reading pack
Collection location
North library desk
Reference
DEMO-2048

Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.
``` Referencia de código - Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local. - Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa. ## Configuración del agente sistema de diseño NL ### Punto de partida para la implementación La vista previa independiente carga localmente la misma versión de CSS nativo. Los componentes de botón y lista de datos que solo requieren CSS no necesitan un proveedor React. La biblioteca debe ir acompañada de los valores del tema original. El ZIP con el ejemplo completo y funcional, disponible en Fuentes, también incluye las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/nl-design-system.html. No abras ejemplos basados en módulos mediante file://. ``` npm install @utrecht/component-library-css@9.0.15 # CSS-aware application entry: # import '@utrecht/component-library-css/dist/index.css'; # import './example-theme.css'; # Wrap the dl/button composition in
. # Add application event handlers for editing and theme selection. ``` ### Una instrucción para tu proyecto ``` Usa @utrecht/component-library-css 9.0.15 para una lista de definición de recibo y un botón principal. Proporciona un tema original limitado al ámbito del contenedor mediante tokens públicos --utrecht-* y deja intactas las variables internas --_utrecht-*. Permite editar la ubicación con opciones de botón de opción etiquetadas, guardar y cancelar, un anuncio de actualización cortés y la devolución del foco. Muestra un segundo tema original sin sustituir el marcado del componente ni perder datos. Indica que todos los valores numéricos del tema son decisiones de la aplicación. ``` ## Fuentes y alcance de sistema de diseño NL NL Design System es un ecosistema independiente de marcas. Este ejemplo educativo selecciona una implementación de la comunidad y dos temas originales; no afirma representar un estilo visual nacional ni utiliza la identidad de ningún municipio. - Descripción general del ecosistema Recursos de diseño para servicios públicos y contexto comunitario. - Introducción para desarrolladores Componentes, temas organizativos y arquitectura de tokens de diseño. - Catálogo de componentes Explora los componentes documentados y las referencias disponibles. - Descargar el ejemplo funcional completo Archivo ZIP con HTML completo, dependencias locales CSS/JavaScript, licencias incluidas e instrucciones exactas para ejecutarlo. No se requiere un paso de compilación. ## Recursos relacionados con sistema de diseño NL ### NSW sistema de diseño Explora los tokens de diseño de NSW, la tipografía Public Sans y pestañas nativas accesibles mediante el teclado con una guía completa del taller y una lista de lectura local independiente. ### ONS sistema de diseño Crea una respuesta a una encuesta que no pueda contradecirse: casillas nativas de ONS, respuestas mutuamente excluyentes, referencias exactas a tipos y colores, y un flujo local completo de revisión. ### Ontario sistema de diseño 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. - [Referencia de implementación](https://github.com/nl-design-system/utrecht) - [Fuente](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Fuente](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Fuente](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Consulta la especificación complementaria](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Referencia de código](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Consulta la especificación complementaria](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Consulta la especificación complementaria](https://github.com/nl-design-system/utrecht/tree/main/packages/component-library-css) - [Consulta la especificación complementaria](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Consulta la especificación complementaria](https://www.nldesignsystem.nl/handboek/estafettemodel/) - [Referencia de código](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Referencia de código](https://github.com/nl-design-system/utrecht) - [Descripción general del ecosistema Recursos de diseño para servicios públicos y contexto comunitario.](https://www.nldesignsystem.nl/) - [Introducción para desarrolladores Componentes, temas organizativos y arquitectura de tokens de diseño.](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Catálogo de componentes Explora los componentes documentados y las referencias disponibles.](https://www.nldesignsystem.nl/componenten/)