# Sistema de diseño Det Fælles Designsystem ## Vista previa de interfaz del sistema de diseño Det Fælles Designsystem Compara cinco recursos originales de planificación, cambia el orden y recupera los resultados tras una búsqueda sin coincidencias. ## Referencia de diseño del sistema de diseño Det Fælles Designsystem Tema real de DKFDS 11.3.0 para Borger.dk, mapa de espaciado, mapa tipográfico y variables de foco. Los nombres que se muestran son referencias al código fuente Sass. ### Tema y foco de Borger.dk | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $borger-primary | #44831E | Configuración Sass real de la versión 11.3.0; estos nombres son variables de origen, no propiedades personalizadas de CSS. | | $borger-primary-dark | #3C5C22 | Configuración Sass real de la versión 11.3.0; estos nombres son variables de origen, no propiedades personalizadas de CSS. | | $borger-primary-darker | #233614 | Configuración Sass real de la versión 11.3.0; estos nombres son variables de origen, no propiedades personalizadas de CSS. | | $header-portal-background-color | #f1f1f1 | Configuración Sass real de la versión 11.3.0; estos nombres son variables de origen, no propiedades personalizadas de CSS. | | $theme-focus-width | 3px | Configuración Sass real de la versión 11.3.0; estos nombres son variables de origen, no propiedades personalizadas de CSS. | | $theme-focus-offset | 1px | Configuración Sass real de la versión 11.3.0; estos nombres son variables de origen, no propiedades personalizadas de CSS. | | $theme-focus-style | solid | Configuración Sass real de la versión 11.3.0; estos nombres son variables de origen, no propiedades personalizadas de CSS. | | $typography-text-max-width | 66ch | Configuración Sass real de la versión 11.3.0; estos nombres son variables de origen, no propiedades personalizadas de CSS. | | $typography-font-family | IBM Plex Sans, system-ui, system, sans-serif | Configuración Sass real de la versión 11.3.0; estos nombres son variables de origen, no propiedades personalizadas de CSS. | ### Claves del mapa de espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | 0 | 0px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 1 | 2px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 2 | 4px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 3 | 8px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 305 | 12px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 4 | 16px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 405 | 20px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 5 | 24px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 505 | 28px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 6 | 32px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 7 | 40px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | | 8 | 48px | Mapa $spacers publicado. Las claves no secuenciales, como 305 y 405, representan 12px y 20px; no interpretes la clave como un tamaño en píxeles. | ### Mapa de tamaños de fuente | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | 2xs | 1.2rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | xs | 1.4rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | sm | 1.6rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | md | 1.8rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | lg | 2.0rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | xl | 2.1rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | 2xl | 2.2rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | 3xl | 2.4rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | 4xl | 2.8rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | 5xl | 3.2rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | 6xl | 4.0rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | | 7xl | 4.8rem | Entrada publicada de $fds-font-sizes. La raíz predeterminada es 62.5% y respeta las preferencias tipográficas del navegador; con el valor predeterminado de 16px del navegador, 1.6rem equivale a 16px. | ## Guía completa del sistema de diseño Det Fælles Designsystem 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. ## Tema y alcance de implementación de DKFDS para el sistema de diseño Det Fælles Designsystem ### Elige Borger.dk o Virk de forma deliberada > Det Fælles Designsystem distribuye hojas de estilos independientes para Borger.dk y Virk. Este ejemplo fija dkfds 11.3.0 y usa la hoja de estilos de Borger.dk, que aporta sus característicos controles principales verdes y el texto en IBM Plex Sans. No se limita a cambiar el color de un botón para presentarlo como un cambio completo de tema. Cargar otro tema debe ser una decisión de implementación deliberada. ### No atribuyas a la biblioteca la ordenación original Las pautas publicadas para tablas proporcionan marcado y estilos, pero dejan explícitamente el comportamiento de ordenación y búsqueda en manos de la aplicación. La vista previa incluye una implementación original completa de ambos. Esta distinción importa: importar DKFDS JavaScript por sí solo no convierte cualquier tabla en una vista de datos con búsqueda y ordenación. ## Valores Sass y ritmo de base del sistema de diseño Det Fælles Designsystem ### Interpreta los mapas de origen como mapas de origen La referencia recoge valores Sass reales en vez de inventar nombres --token. El mapa de espaciado usa una base de 8px, con claves como 305 para 12px y 405 para 20px. En lugar de interpretar esos números como píxeles literales, el desarrollador debe usar el auxiliar de la biblioteca o las convenciones de utilidades correspondientes. La tabla de parámetros muestra la correspondencia. ### Respeta la convención del tamaño de fuente raíz El tamaño raíz predeterminado es 62.5% y respeta las preferencias tipográficas del navegador. Por eso, el mapa de tamaños de fuente de origen incluye 1.6rem para el nivel estándar de texto pequeño o de cuerpo con el valor habitual predeterminado del navegador. Copiar un valor rem en un entorno con un tamaño raíz distinto puede cambiar considerablemente el resultado. El ejemplo carga la hoja de estilos real para mantener la coherencia del contexto tipográfico y de espaciado. ## Estructura semántica de tablas del sistema de diseño Det Fælles Designsystem ### Usa un título de tabla y define claramente las funciones de las columnas La comparación de recursos tiene un título, encabezados de columna y celdas de datos normales. Los títulos, los formatos, los minutos numéricos y los propósitos ocupan columnas separadas porque las personas comparan esos atributos. Los tiempos de lectura son estimaciones de ejemplo redactadas por el equipo, no estadísticas medidas de tráfico ni de rendimiento. El título deja claro ese límite sin cambiar la estructura de la tabla. - Incluye un título útil y encabezados de columna. - Mantén los datos numéricos como números en el modelo de la aplicación. - Etiqueta la región de desplazamiento enfocable en pantallas estrechas. ### Mantén el desplazamiento móvil dentro de la tabla La tabla ordenable está dentro de una región de desplazamiento adaptable y enfocable. Su ancho mínimo mantiene las columnas legibles y la página exterior dentro de la ventana gráfica. En este ejemplo, la tabla no se convierte en tarjetas sin relación entre sí en pantallas estrechas, ya que eso exigiría otro modelo de navegación y controles de ordenación. Los usuarios de teclado pueden enfocar la región de desplazamiento. ## Det Fælles Designsystem Estado de ordenación y comparación numérica del sistema de diseño ### Mantén un único orden activo La columna de título comienza en orden ascendente. Al activar el mismo encabezado, se invierte el orden; al seleccionar la columna de minutos, esta comienza en orden ascendente. Solo el encabezado activo recibe aria-sort, y la instrucción oculta de cada botón describe la siguiente acción. La flecha visible refleja el mismo estado, no es un elemento decorativo independiente. ### Compara los números como números Los minutos son datos numéricos y se ordenan mediante una resta. Los títulos se ordenan con localeCompare. Ordenar cadenas numéricas alfabéticamente produciría órdenes engañosos a medida que aumentaran los valores. Los objetos de fila originales siguen siendo la fuente de verdad, y el contenido se representa con textContent, sin interpretarlo como marcado. ## Det Fælles Designsystem Búsqueda enviada y recuperación cuando no hay resultados del sistema de diseño ### Aplica la consulta al enviarla Al enviar el formulario, la búsqueda filtra todas las características mostradas, también al pulsar Enter. Escribir sin enviar no sustituye la tabla que está leyendo la persona. El estado indica la cantidad de resultados visibles y el orden actual, y la consulta permanece en el campo. Este es el modelo de búsqueda con envío elegido para el ejemplo. ### Restablece la consulta sin perder el orden Si la consulta no devuelve resultados, se muestra un mensaje para recuperarse. Al restablecerla, se restauran todas las filas y el foco vuelve al campo de búsqueda, sin alterar la columna ni la dirección de ordenación seleccionadas. Así, la búsqueda y la ordenación se mantienen como variables de estado independientes. No se muestra un estado de carga artificial porque el conjunto completo de cinco filas ya está disponible localmente. ## Det Fælles Designsystem Integración funcional completa del sistema de diseño ### Carga los recursos de distribución sin alterar sus rutas El mapa de exportaciones del paquete 11.3.0 expone su entrada JavaScript, no importaciones profundas arbitrarias de CSS. La configuración copia la distribución en public/dkfds y vincula la hoja de estilos desde index.html, conservando las rutas relativas de fuentes e imágenes. Guarda main.js y denmark.css, incluidos con el ejemplo, junto a esa estructura. La vista previa local incorpora los mismos recursos para facilitar una inspección fiable. 1. Instala dkfds 11.3.0 y copia su distribución en public/dkfds. 2. Usa la estructura HTML proporcionada para cargar la hoja de estilos de Borger.dk. 3. Guarda la entrada completa y CSS; después, ejecuta la aplicación local. 4. Comprueba la ordenación numérica, la búsqueda enviada, el restablecimiento y el desplazamiento interno en móviles. ### Comprueba todo el flujo de comparación Ordena los minutos en ambos sentidos, envía una consulta sin coincidencias y restablece la tabla. Busca «Template» y comprueba que solo queden las dos filas de plantillas y que se conserve el orden actual. En el ancho de un teléfono, desplázate por la tabla y confirma que la página no se desborde. La comprobación también verifica que se carguen todos los recursos incluidos y que no haya errores del navegador. ## Det Fælles Designsystem Ejemplos de componentes del sistema de diseño ### main.js — comportamiento completo de comparación Datos originales completos, ordenación numérica y textual, filtrado al enviar y restablecimiento. ``` // index.html loads /dkfds/css/dkfds-borgerdk.css from the copied distribution. import './denmark.css'; const rows=[{name:'Content inventory',type:'Worksheet',minutes:25,note:'Map the purpose and owner of each section.'},{name:'Accessibility review',type:'Checklist',minutes:30,note:'Inspect keyboard use, reading order and clear labels.'},{name:'Research questions',type:'Template',minutes:15,note:'Separate assumptions from questions that need evidence.'},{name:'Decision summary',type:'Template',minutes:10,note:'Record a choice, its reason and what remains uncertain.'},{name:'Prototype walkthrough',type:'Guide',minutes:20,note:'Walk through one realistic task and note friction.'}];let key='name',direction=1,query='';document.getElementById('root').innerHTML=`

DET FÆLLES DESIGNSYSTEM / ORIGINAL TABLE STUDY

Find a planning resource

Compare five authored resources. Search the full table or sort by title and estimated reading time.

Original resource comparison; reading times are sample estimates
FormatPurpose
`;const $=id=>document.getElementById(id);function render(){const list=rows.filter(r=>Object.values(r).join(' ').toLowerCase().includes(query)).sort((a,b)=>direction*(key==='minutes'?a.minutes-b.minutes:a.name.localeCompare(b.name)));$('rows').replaceChildren(...list.map(r=>{const tr=document.createElement('tr');[r.name,r.type,String(r.minutes),r.note].forEach(value=>{const td=document.createElement('td');td.textContent=value;tr.append(td)});return tr}));$('count').textContent=list.length+' of '+rows.length+' resources · sorted by '+(key==='name'?'title':'minutes')+' '+(direction===1?'ascending':'descending');$('empty').hidden=!!list.length;document.querySelectorAll('.sort').forEach(b=>{const active=b.dataset.key===key;active?b.parentElement.setAttribute('aria-sort',direction===1?'ascending':'descending'):b.parentElement.removeAttribute('aria-sort');b.querySelector('.arrow').textContent=active?(direction===1?'↑':'↓'):'↕';b.querySelector('.sr-only').textContent=' — sort '+(active&&direction===1?'descending':'ascending')})}$('search-form').addEventListener('submit',e=>{e.preventDefault();query=$('search').value.trim().toLowerCase();render()});$('reset').addEventListener('click',()=>{$('search').value='';query='';render();$('search').focus()});document.querySelectorAll('.sort').forEach(b=>b.addEventListener('click',()=>{direction=key===b.dataset.key?-direction:1;key=b.dataset.key;render()}));render(); ``` Referencia de código - La ordenación y la búsqueda son código original de la aplicación, tal como exige el límite de integración publicado para la tabla. ### denmark.css — composición original de la página Controles de búsqueda adaptables y región de desplazamiento de la tabla enfocable con el teclado. ``` body{margin:0}main{max-width:1160px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em}.lead{max-width:66ch}#search-form{margin:32px 0}.search-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.search-controls input{flex:1;min-width:180px;max-width:480px}#count{font-weight:600}.table--responsive-scroll{position:relative;max-width:100%;overflow:auto}.table{min-width:720px;width:100%}.table caption{text-align:left;font-weight:600;margin-bottom:16px}.table th:nth-child(1){width:25%}.table th:nth-child(2){width:15%}.table th:nth-child(3){width:16%}.arrow{margin-left:8px}.sort{white-space:nowrap}aside,#empty{padding:24px;margin-top:32px;background:#f1f1f1;border-left:4px solid #44831e}aside h2,#empty h2{margin-top:0}aside li{margin:8px 0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.search-controls{gap:12px}.search-controls input{flex-basis:100%;max-width:none}h1{font-size:34px}} @media(max-width:480px){.search-controls input{min-width:0;width:100%}.search-controls .button{max-width:100%;white-space:normal}h1{overflow-wrap:anywhere}} ``` Referencia de código - La tabla conserva la disposición en columnas dentro de una región de desplazamiento en pantallas estrechas. ### index.html — estructura completa para los recursos de distribución Carga la hoja de estilos publicada y conserva las rutas de sus recursos relativos. ``` Planning resource comparison
``` Referencia de código - Sustituye el index.html raíz de Vite por esta estructura. ## Det Fælles Designsystem Configuración del agente de IA del sistema de diseño ### Punto de partida para la implementación La hoja de estilos y las fuentes oficiales funcionan localmente. La aplicación se encarga de ordenar y filtrar; esta tabla estática no necesita una llamada a DKFDS.init. ``` npm create vite@latest dkfds-table -- --template vanilla cd dkfds-table npm install npm install dkfds@11.3.0 mkdir -p public/dkfds cp -R node_modules/dkfds/dist/. public/dkfds/ # Replace index.html, src/main.js and src/denmark.css with the supplied examples. npm run dev ``` ### Una instrucción para tu proyecto ``` Crea la comparación de recursos de DKFDS con la distribución real 11.3.0 de Borger.dk y sus fuentes. Implementa la ordenación numérica y por título completa y original, un único encabezado con aria-sort activo, búsqueda enviada, aviso de recuento y restablecimiento que conserve el orden. Mantén la tabla desplazable horizontalmente en su propia región accesible con el teclado. ``` ## Det Fælles Designsystem Fuentes y alcance del sistema de diseño Una comparación original de OpenDesign con los estilos y las fuentes de DKFDS 11.3.0 de Borger.dk. La ordenación, la búsqueda y los datos de ejemplo son código original completo de la aplicación, no funciones integradas de tablas de DKFDS. - Pautas para tablas Responsabilidades del marcado, el desplazamiento, la ordenación y la búsqueda. - Paquetes y temas Hojas de estilo de la distribución y límites de inicialización. - Ajuste del tema Configuración del tema en el código fuente. - Código fuente con versiones Mapas de Sass, valores del tema y licencias de recursos. ## Det Fælles Designsystem Recursos relacionados con el sistema de diseño ### sistema de diseño .italia Implementa una secuencia de servicios fácil de leer con la tipografía real, la estructura adaptable de Stepper y el estado de formulario local recuperable de Bootstrap Italia. ### 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. ### 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. - [Referencia de implementación](https://designsystem.dk/komponenter/tables/) - [Fuente](https://github.com/detfaellesdesignsystem/dkfds-components) - [Referencia de código](https://designsystem.dk/komponenter/tables/) - [Referencia de código](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Pautas para tablas Responsabilidades del marcado, el desplazamiento, la ordenación y la búsqueda.](https://designsystem.dk/komponenter/tables/) - [Paquetes y temas Hojas de estilo de la distribución y límites de inicialización.](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Ajuste del tema Configuración del tema en el código fuente.](https://designsystem.dk/kom-i-gang/implementering-kode/justering/) - [Código fuente con versiones Mapas de Sass, valores del tema y licencias de recursos.](https://github.com/detfaellesdesignsystem/dkfds-components)