Crea una interfaz de servicio público con componentes reales de colaboradores y un tema explícito. Esta referencia usa Utrecht CSS para mostrar la correspondencia entre tokens, la estructura de una lista de datos y dos temas originales con el mismo flujo de edición.
Componentes nativos de botón/lista de datos de Utrecht CSS 9.0.15, tokens de tema originales e interacción de la aplicación. · Referencia de implementación
02
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.
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.
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.
css
.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;
}
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.
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.
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.
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.
Cargue una sola vez el componente de CSS con versión especificada.
Aplique los tokens de tema pertinentes a un elemento contenedor.
Represente el mismo marcado semántico del componente dentro de ese contenedor.
Compruebe el foco, el ajuste de línea y los colores de estado en cada tema compatible.
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.
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.
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.
HTML
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NL Design System composition</title><link rel="stylesheet" href="vendor/utrecht-9.0.15/index.css"><style>.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;
}
*{box-sizing:border-box}body{margin:0}.example-theme{font:18px/1.6 Arial,sans-serif;color:#222;--accent:#005a5b;--wash:#eef6f4;--utrecht-data-list-rows-column-min-inline-size:12ch;--utrecht-data-list-rows-column-inline-size:45%;--utrecht-data-list-rows-gap:24px;--utrecht-data-list-rows-border-bottom-width:1px;--utrecht-data-list-rows-border-bottom-color:#ccd4d2;--utrecht-data-list-rows-item-padding-block-start:16px;--utrecht-data-list-rows-item-padding-block-end:16px;--utrecht-data-list-item-key-font-weight:700;--utrecht-data-list-item-value-line-height:1.6}.example-theme[data-theme=plum]{--accent:#57328c;--wash:#f5effa;--utrecht-button-primary-action-background-color:#57328c;--utrecht-button-primary-action-hover-background-color:#3c2262;--utrecht-button-border-radius:8px}.example-theme[data-theme=plum] h1{font-family:Georgia,serif}.toolbar{background:var(--wash);padding:20px 24px;border-bottom:4px solid var(--accent);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.toolbar label{font-size:16px}.toolbar select{font:inherit;max-width:100%;padding:8px}article{max-width:56rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:8px 0 24px}h2{font-size:24px}p{margin:16px 0}.utrecht-data-list__item-value{margin:0;overflow-wrap:anywhere}.utrecht-button{margin-block:8px}.editor{background:var(--wash);padding:24px;margin-block:24px}fieldset{border:0;padding:0;margin:0}legend{font-size:22px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;padding:12px 0}.choice input{width:24px;height:24px;accent-color:var(--accent)}.buttons{display:flex;gap:24px;flex-wrap:wrap;align-items:center}.cancel{font:inherit;background:none;border:0;text-decoration:underline;min-height:48px;color:var(--accent);cursor:pointer}small{display:block;font-size:14px;margin-top:32px;color:#555}:focus-visible{outline:3px solid #111;outline-offset:3px}[hidden]{display:none!important}#notice{font-weight:700;color:var(--accent)}@media(max-width:600px){.example-theme{--utrecht-data-list-rows-column-min-inline-size:100%;}h1{font-size:28px}.toolbar{align-items:flex-start;flex-direction:column}.editor{padding:16px}}
</style><main class="example-theme" data-theme="teal"><div class="toolbar"><strong>Community collection · Example</strong><label>Original theme <select id="theme"><option value="teal">Teal</option><option value="plum">Plum</option></select></label></div><article><p>CONTRIBUTOR COMPONENTS + YOUR THEME</p><h1>Review your collection details</h1><p>This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.</p><dl class="utrecht-data-list utrecht-data-list--rows"><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Item</dt><dd class="utrecht-data-list__item-value">Community reading pack</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Collection location</dt><dd class="utrecht-data-list__item-value" id="location">North library desk</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Reference</dt><dd class="utrecht-data-list__item-value">DEMO-2048</dd></div></dl><button id="edit" type="button" class="utrecht-button utrecht-button--primary-action">Change collection location</button><form class="editor" hidden><fieldset><legend>Choose a collection location</legend><label class="choice"><input type="radio" name="place" value="North library desk" checked>North library desk</label><label class="choice"><input type="radio" name="place" value="Riverside community room">Riverside community room</label><label class="choice"><input type="radio" name="place" value="Central welcome counter">Central welcome counter</label></fieldset><div class="buttons"><button class="utrecht-button utrecht-button--primary-action" type="submit">Save location</button><button type="button" class="cancel" id="cancel">Cancel</button></div></form><p id="notice" role="status"></p><small>Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.</small></article></main><script>
const main=document.querySelector('main'),theme=document.querySelector('#theme'),edit=document.querySelector('#edit'),form=document.querySelector('form'),locationText=document.querySelector('#location'),notice=document.querySelector('#notice');let saved=locationText.textContent;theme.onchange=()=>main.dataset.theme=theme.value;edit.onclick=()=>{form.hidden=false;edit.hidden=true;notice.textContent='';[...form.elements.place].forEach(r=>r.checked=r.value===saved);form.querySelector(':checked').focus()};function close(){form.hidden=true;edit.hidden=false;edit.focus()}form.onsubmit=e=>{e.preventDefault();saved=form.elements.place.value;locationText.textContent=saved;notice.textContent='Collection location updated to '+saved+'.';close()};document.querySelector('#cancel').onclick=()=>{notice.textContent='No changes saved.';close()};
</script></html>
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.
04
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://.
bash
npm install @utrecht/[email protected]
# CSS-aware application entry:
# import '@utrecht/component-library-css/dist/index.css';
# import './example-theme.css';
# Wrap the dl/button composition in <main class="example-theme">.
# Add application event handlers for editing and theme selection.
Una instrucción para tu proyecto
Instrucción para el agente
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.
05
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.
