Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño de Designsystemet.
Explora las funciones reales del tema, los modos de tamaño y el comportamiento nativo de los campos de Designsystemet mediante un editor completo de encargos con contador de caracteres y estado de presentación conservado.
Comportamiento nativo de Designsystemet 1.23.0 ds-field, CSS y tema predeterminado con fuentes Inter locales. · Referencia de implementación
02
Referencia de diseño del sistema de diseño de Designsystemet
Exportaciones del tema predeterminado e implementación nativa de ds-field en @digdir/designsystemet-css/web 1.23.0. Las filas de color indican explícitamente los valores del modo claro.
Comportamiento, CSS y paquetes de temas del sistema de diseño de Designsystemet
Carga las tres partes en el orden correcto
Designsystemet separa el comportamiento independiente del framework, los CSS de los componentes y los valores del tema. Este ejemplo fija designsystemet-web y designsystemet-css en 1.23.0, importa los CSS y, a continuación, el tema predeterminado, y registra el comportamiento una sola vez. Un campo con estilos, pero sin su paquete de comportamiento, no es la misma implementación que el ds-field conectado que se muestra aquí.
Usa el contrato actual de HTML sin formato
El ejemplo usa ds-field alrededor de elementos normales de input, textarea y select con clases ds-input. Así se conservan los controles de formulario nativos mientras el paquete conecta las etiquetas y las descripciones. No copia un campo antiguo exclusivo de React API. El código fuente completo incluye las importaciones correctas del paquete y la lógica de revisión de la aplicación original.
Esquema de color y modos de tamaño del sistema de diseño Designsystemet
Cambiar la apariencia mediante atributos data
La página establece data-color-scheme en light o dark en el elemento raíz. El tema proporciona los colores semánticos correspondientes, mientras que los valores del formulario permanecen sin cambios. La tabla de parámetros registra explícitamente los valores predeterminados de light; no da a entender que esos mismos colores hexadecimales se apliquen en dark mode. Un botón secundario de apariencia describe la acción que tendrá lugar a continuación.
Aplicar el modo de tamaño a todo el sistema
El control de tamaño de lectura cambia data-size entre sm, md y lg. Esto cambia el modo de tamaño del tema, en lugar de ampliar solo el título. Los factores de modo publicados son 1, 1.125 y 1.3125; se aplican en las fórmulas de los tokens y no son una instrucción universal para asignar esos valores en píxeles a un control. El ejemplo prueba el modo grande tanto en un teléfono como en un ordenador.
Tipografía Inter y semántica del sistema de diseño Designsystemet
Incluir los pesos previstos
La vista previa incluye Inter 400, 500 y 600, y activa la característica de fuente cv05 documentada para la forma de la l minúscula. La página usa clases nativas para encabezados y párrafos, de modo que el peso de la fuente y la altura de línea siguen el tema. Una anotación fija de 14px es una nota complementaria definida explícitamente, claramente fuera de la escala interactiva principal.
Mantener el contenido de ayuda junto al control
La indicación del título explica el propósito de la etiqueta; la indicación del resultado describe el tipo de contenido esperado. Ambas permanecen junto a sus controles y están conectadas mediante ds-field. Las indicaciones complementarias aparecen en una tarjeta independiente que se sitúa después del formulario en pantallas estrechas. La disposición no depende de pasar el cursor para mostrar las instrucciones.
Relaciones automáticas y respuesta de caracteres del sistema de diseño Designsystemet
Dejar que ds-field conecte un control
Cada ds-field contiene un control de tipo campo, su etiqueta y, de forma opcional, descripciones data-field. El paquete asigna los ID y establece las relaciones entre etiquetas y descripciones. Agrupar controles no relacionados dentro de un mismo ds-field haría ambiguo ese comportamiento automático. Para agrupar controles, usa un fieldset; no des por hecho que este contenedor es un contenedor genérico de formulario.
Incluye un solo control de tipo campo en cada ds-field.
Usa descripciones data-field para el contenido de ayuda relacionado.
Deja que el observador nativo mantenga los ID y las relaciones described-by.
Entender qué mide el contador
Validación de la aplicación y estado de revisión del sistema de diseño Designsystemet
Validar por separado la tarea redactada
La aplicación requiere que el título y el resultado de la tarea no estén vacíos y rechaza los resultados que superen el límite de muestra. Después de mostrar un mensaje práctico, enfoca el campo correspondiente. El contador nativo informa sobre la longitud, mientras que el controlador de envío aplica la regla de revisión local. No se usa maxlength para descartar silenciosamente el texto pegado.
Conservar los datos al cambiar la presentación
Una revisión correcta muestra el título y el resultado actuales como texto. Editar cualquiera de los campos borra el resultado; cambiar la apariencia o el tamaño lo conserva porque esos controles no modifican el encargo. Esta distinción es intencional y está verificada. No se envía nada a un servicio de gestión de proyectos y la vista previa nunca afirma que se haya creado una tarea externa.
Implementación completa de campos nativos del sistema de diseño Designsystemet
Reproducir el ejemplo versionado
Crea un proyecto vanilla con Vite, instala los dos paquetes fijados de Designsystemet e Inter y guarda el archivo de entrada completo y digdir.css. Conserva el elemento raíz de montaje. El código fuente incluye el registro, el orden del tema, el marcado del contador, los controles de presentación y todas las transiciones de validación de la revisión. La vista previa local usa el mismo observador de campos nativos, no una imitación dibujada a mano.
Importa una vez el comportamiento; después, el componente CSS y el tema predeterminado.
Carga Inter 400, 500 y 600, y guarda el archivo de entrada/CSS completo.
Prueba el contador al superar el límite y corrige el resultado.
Revisa, cambia el tamaño y la apariencia, y luego edita el texto para borrar el resultado.
Probar el comportamiento al superar el límite y al recuperarse
Pega 150 caracteres comunes en el campo de resultado y verifica que se indiquen los diez caracteres que exceden el límite. La revisión debe rechazarlo. Sustituye el texto por un resultado breve y revisa correctamente; luego cambia al modo oscuro y el tamaño de lectura sin perder el resultado. Edita el título y confirma que se borra la revisión anterior. Comprueba que el foco sea visible y que el texto se ajuste en cada ancho de vista.
Ejemplos de componentes del sistema de diseño Designsystemet
main.js — estudio completo de campos nativos y temas
Editor completo, marcado real del contador, controles de apariencia y tamaño, y validación de la revisión local.
javascript
import '@digdir/designsystemet-web';
import '@digdir/designsystemet-css';
import '@digdir/designsystemet-css/theme';
import '@fontsource/inter/latin-400.css';
import '@fontsource/inter/latin-500.css';
import '@fontsource/inter/latin-600.css';
import './digdir.css';
document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`<main><header><div><p class="eyebrow">DESIGNSYSTEMET / NATIVE FIELD STUDY</p><h1 class="ds-heading" data-size="lg">Write a useful task brief</h1></div><button id="theme" class="ds-button" data-variant="secondary" aria-pressed="false">Dark appearance</button></header><p class="ds-paragraph lead">Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.</p><div class="layout"><form id="brief-form" novalidate><ds-field class="ds-field"><label>Task title</label><input id="title" class="ds-input" type="text" value="Review the navigation"/><p data-field="description">Use a short label that identifies the work.</p></ds-field><ds-field class="ds-field"><label>Desired outcome</label><textarea id="outcome" class="ds-input" rows="4">Make the main sections easier to find without changing the accepted content.</textarea><p data-field="description">Describe the result, not a list of implementation instructions.</p><p data-field="counter" data-limit="140" data-over="%d characters over the sample limit" data-under="%d characters remaining"></p></ds-field><p id="error" class="ds-validation-message" hidden role="alert"></p><button class="ds-button" type="submit">Review brief</button></form><aside class="ds-card" data-color="neutral"><h2 class="ds-heading" data-size="sm">Reading size</h2><p class="ds-paragraph">The theme changes the complete size mode rather than scaling only a heading.</p><ds-field class="ds-field"><label for="size">Component size</label><select class="ds-input" id="size"><option value="sm">Small</option><option value="md" selected>Medium</option><option value="lg">Large</option></select></ds-field><h3 class="ds-heading" data-size="xs">A clear brief contains</h3><ul><li>One concrete outcome.</li><li>Constraints that must remain true.</li><li>A way to check the result.</li></ul><p class="small">Default theme and web behavior 1.23.0. Original local application; no task is created elsewhere.</p></aside></div><section id="review" class="ds-card" data-color="success" hidden tabindex="-1"><h2 class="ds-heading" data-size="sm">Local brief review</h2><h3 id="review-title" class="ds-heading" data-size="xs"></h3><p id="review-body" class="ds-paragraph"></p><p class="small">Editing a field clears this review. Appearance and reading size preserve it.</p></section></main>`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()});
Los cambios de tema y tamaño conservan los valores; solo las ediciones del contenido invalidan la revisión.
04
Configuración del agente del sistema de diseño Designsystemet
Punto de partida para la implementación
Las relaciones nativas entre etiquetas, el estado del contador, la recuperación de la validación y los cambios de tamaño en los modos claro y oscuro se probaron en un navegador real.
sh
npm create vite@latest ds-brief -- --template vanilla
cd ds-brief
npm install
npm install @digdir/[email protected] @digdir/[email protected] @fontsource/inter
# Replace src/main.js and add src/digdir.css. Keep <div id="root"></div>.
npm run dev
Una instrucción para tu proyecto
Instrucción para el agente
Crea el editor del encargo usando el comportamiento de Designsystemet 1.23.0/CSS/default theme en el orden correcto. Usa ds-field con un solo control nativo, los atributos reales del contador data-field y los pesos de Inter. Conserva la revisión al cambiar la apariencia y el tamaño, bórrala después de editar el contenido y aplica la regla original de 140 caracteres sin truncar el texto pegado.
05
Fuentes y alcance del sistema de diseño Designsystemet
Editor local creado por OpenDesign que usa Designsystemet CSS y el comportamiento web 1.23.0. El tema predeterminado y el observador de campos son nativos; el contenido breve, la regla de 140 caracteres y el flujo de revisión son originales.
