# Sistema de diseño de Designsystemet ## Vista previa de la interfaz del sistema de diseño de Designsystemet Usa el contador de caracteres nativo, cambia el tema y el tamaño, y conserva o invalida la revisión según los cambios realizados. ## 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. ### Roles de acento predeterminados del modo claro | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ds-color-accent-background-default | #fff | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | | --ds-color-accent-background-tinted | #eef4fa | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | | --ds-color-accent-surface-tinted | #ddeaf6 | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | | --ds-color-accent-surface-hover | #c7ddf0 | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | | --ds-color-accent-border-subtle | #99c0e3 | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | | --ds-color-accent-border-default | #2a7cc5 | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | | --ds-color-accent-text-default | #002c54 | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | | --ds-color-accent-base-default | #0062ba | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | | --ds-color-accent-base-hover | #004f96 | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | | --ds-color-accent-base-active | #003d75 | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | | --ds-color-accent-base-contrast-default | #fff | Rol real del tema predeterminado en modo claro en 1.23.0. El esquema oscuro del entorno de ejecución usa sus propios valores de rol. | ### Roles neutros predeterminados del modo claro | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ds-color-neutral-background-default | #fff | Usa roles neutros para las superficies de apoyo y el texto, sin atribuirles un significado de estado innecesario. | | --ds-color-neutral-background-tinted | #f3f3f4 | Usa roles neutros para las superficies de apoyo y el texto, sin atribuirles un significado de estado innecesario. | | --ds-color-neutral-surface-default | #fff | Usa roles neutros para las superficies de apoyo y el texto, sin atribuirles un significado de estado innecesario. | | --ds-color-neutral-surface-tinted | #e8e8e9 | Usa roles neutros para las superficies de apoyo y el texto, sin atribuirles un significado de estado innecesario. | | --ds-color-neutral-border-subtle | #bbbcbd | Usa roles neutros para las superficies de apoyo y el texto, sin atribuirles un significado de estado innecesario. | | --ds-color-neutral-text-subtle | #5b5d60 | Usa roles neutros para las superficies de apoyo y el texto, sin atribuirles un significado de estado innecesario. | | --ds-color-neutral-text-default | #292c30 | Usa roles neutros para las superficies de apoyo y el texto, sin atribuirles un significado de estado innecesario. | | --ds-color-neutral-base-default | #24272b | Usa roles neutros para las superficies de apoyo y el texto, sin atribuirles un significado de estado innecesario. | | --ds-color-neutral-base-contrast-default | #fff | Usa roles neutros para las superficies de apoyo y el texto, sin atribuirles un significado de estado innecesario. | ### Modo de tamaño y fundamentos tipográficos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ds-size-mode-font-size--sm | 1 | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-size-mode-font-size--md | 1.125 | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-size-mode-font-size--lg | 1.3125 | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-size-base | 18 | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-font-family | Inter | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-font-weight-regular | 400 | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-font-weight-medium | 500 | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-font-weight-semibold | 600 | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-line-height-sm | 1.3 | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-line-height-md | 1.5 | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-line-height-lg | 1.7 | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-border-radius-base | 0.25rem | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-border-radius-sm | min(.5 * var(--ds-border-radius-base), var(--ds-border-radius-scale)) | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-border-radius-md | min(var(--ds-border-radius-base), 2 * var(--ds-border-radius-scale)) | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | | --ds-border-radius-lg | min(2 * var(--ds-border-radius-base), 5 * var(--ds-border-radius-scale)) | Escalar o expresión exportados. Usa los modos data-size en lugar de interpretar cada escalar como un valor en píxeles. | ## Guía completa del sistema de diseño de Designsystemet 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. ## 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 El contador nativo usa data-limit, data-under y data-over, y sustituye %d por el recuento restante o excedente. En 1.23.0, calcula según la longitud de cadena de JavaScript y muestra la respuesta mediante data-label/data-state, incluido un estado no válido cuando se supera el límite. Esto no garantiza el recuento de grafemas para todos los emojis. El límite de 140 caracteres es una restricción de escritura de este ejemplo, no una regla oficial de contenido de Designsystemet. ## 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. 1. Importa una vez el comportamiento; después, el componente CSS y el tema predeterminado. 2. Carga Inter 400, 500 y 600, y guarda el archivo de entrada/CSS completo. 3. Prueba el contador al superar el límite y corrige el resultado. 4. 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. ``` 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=`

DESIGNSYSTEMET / NATIVE FIELD STUDY

Write a useful task brief

Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.

Use a short label that identifies the work.

Describe the result, not a list of implementation instructions.

`;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()}); ``` Referencia de código - Select usa el estilo ds-input actual dentro de ds-field. El observador nativo gestiona la respuesta del contador. ### digdir.css — composición adaptable original Disposición en torno al tema nativo, incluida la configuración de la característica de Inter. ``` body{margin:0;font-family:Inter,sans-serif;font-feature-settings:"cv05" 1}main{max-width:1160px;margin:auto;padding:32px}header{display:flex;gap:24px;justify-content:space-between;align-items:start}.eyebrow{font-size:13px;letter-spacing:.04em;font-weight:600}.lead{max-width:65ch;margin-top:24px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:32px}form{display:grid;gap:24px;align-content:start}form button{justify-self:start}aside{padding:24px;align-self:start}aside h3{margin-top:32px}aside select{margin-top:8px}aside li{margin:12px 0}.small{font-size:14px;line-height:1.6}#review{padding:24px;margin-top:32px}#review h3{margin-top:16px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:24px}header{flex-direction:column}} ``` Referencia de código - Los cambios de tema y tamaño conservan los valores; solo las ediciones del contenido invalidan la revisión. ## 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. ``` npm create vite@latest ds-brief -- --template vanilla cd ds-brief npm install npm install @digdir/designsystemet-css@1.23.0 @digdir/designsystemet-web@1.23.0 @fontsource/inter # Replace src/main.js and add src/digdir.css. Keep
. npm run dev ``` ### Una instrucción para tu proyecto ``` 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. ``` ## 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. - Configuración y orden de los temas Comportamiento nativo, CSS, configuración de temas y fuentes. - Fundamentos del tema Puntos de entrada para tamaños, color y tipografía. - Implementación pública Observador ds-field versionado y tema generado. - Alcance del sistema Alcance compartido de componentes y directrices. ## Recursos relacionados con el sistema de diseño Designsystemet ### DSFR Comprende la tipografía, la cuadrícula y el componente de acordeón API concretos del sistema del Estado francés dentro de su ámbito institucional. Compara los comportamientos de divulgación vinculados e independientes en un ejemplo educativo claramente neutral. ### Europa Component Library Examina las funciones de color, tipografía y espaciado de EC en Europa mediante un encargo completo con acordeón nativo, navegación por teclado, opción para abrir todo y una alternativa legible sin JavaScript. ### gov.cz sistema de diseño Explora los roles de color reales, los espacios para tarjetas y la paginación nativa de Gov Design System CE mediante un kit completo de lectura con seis recursos, que incluye estados explícitos de enfoque y página. - [Referencia de implementación](https://designsystemet.no/en/fundamentals/code/setup) - [Fuente](https://github.com/digdir/designsystemet) - [Referencia de código](https://designsystemet.no/en/fundamentals/code/setup) - [Configuración y orden de los temas Comportamiento nativo, CSS, configuración de temas y fuentes.](https://designsystemet.no/en/fundamentals/code/setup) - [Fundamentos del tema Puntos de entrada para tamaños, color y tipografía.](https://designsystemet.no/en/fundamentals) - [Implementación pública Observador ds-field versionado y tema generado.](https://github.com/digdir/designsystemet) - [Alcance del sistema Alcance compartido de componentes y directrices.](https://designsystemet.no/en/intro)