# Sistema de design Det Fælles Designsystem ## Prévia da interface do sistema de design Det Fælles Designsystem Compare cinco recursos de planejamento originais, inverta a ordem e recupere-se de uma consulta sem resultados. ## Referência de design do sistema de design Det Fælles Designsystem Tema real do DKFDS 11.3.0 do Borger.dk, mapa de espaçamento, mapa tipográfico e variáveis de foco. Os nomes exibidos são referências ao código-fonte Sass. ### Tema e foco do Borger.dk | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $borger-primary | #44831E | Configuração Sass real da versão 11.3.0; estes nomes são variáveis de origem, não propriedades personalizadas do CSS. | | $borger-primary-dark | #3C5C22 | Configuração Sass real da versão 11.3.0; estes nomes são variáveis de origem, não propriedades personalizadas do CSS. | | $borger-primary-darker | #233614 | Configuração Sass real da versão 11.3.0; estes nomes são variáveis de origem, não propriedades personalizadas do CSS. | | $header-portal-background-color | #f1f1f1 | Configuração Sass real da versão 11.3.0; estes nomes são variáveis de origem, não propriedades personalizadas do CSS. | | $theme-focus-width | 3px | Configuração Sass real da versão 11.3.0; estes nomes são variáveis de origem, não propriedades personalizadas do CSS. | | $theme-focus-offset | 1px | Configuração Sass real da versão 11.3.0; estes nomes são variáveis de origem, não propriedades personalizadas do CSS. | | $theme-focus-style | solid | Configuração Sass real da versão 11.3.0; estes nomes são variáveis de origem, não propriedades personalizadas do CSS. | | $typography-text-max-width | 66ch | Configuração Sass real da versão 11.3.0; estes nomes são variáveis de origem, não propriedades personalizadas do CSS. | | $typography-font-family | IBM Plex Sans, system-ui, system, sans-serif | Configuração Sass real da versão 11.3.0; estes nomes são variáveis de origem, não propriedades personalizadas do CSS. | ### Chaves do mapa de espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | 0 | 0px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 1 | 2px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 2 | 4px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 3 | 8px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 305 | 12px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 4 | 16px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 405 | 20px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 5 | 24px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 505 | 28px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 6 | 32px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 7 | 40px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | | 8 | 48px | Mapa $spacers publicado. Chaves não sequenciais, como 305 e 405, correspondem a 12px e 20px; não interprete a chave como uma medida em pixels. | ### Mapa de tamanhos de fonte | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | 2xs | 1.2rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | xs | 1.4rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | sm | 1.6rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | md | 1.8rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | lg | 2.0rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | xl | 2.1rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | 2xl | 2.2rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | 3xl | 2.4rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | 4xl | 2.8rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | 5xl | 3.2rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | 6xl | 4.0rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | | 7xl | 4.8rem | Entrada $fds-font-sizes publicada. O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador; com o padrão de 16px do navegador, 1.6rem equivale a 16px. | ## Guia completo do sistema de design Det Fælles Designsystem Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Tema DKFDS e escopo de implementação do sistema de design Det Fælles Designsystem ### Escolha Borger.dk ou Virk de forma deliberada > Det Fælles Designsystem distribui folhas de estilo separadas para Borger.dk e Virk. Este exemplo fixa a versão dkfds 11.3.0 e usa a folha de estilo do Borger.dk, com seus controles primários verdes característicos e texto em IBM Plex Sans. Não altera apenas a cor de um botão para apresentar isso como uma mudança completa de tema. Um tema diferente deve ser carregado como uma escolha deliberada de implementação. ### Não atribua à biblioteca a ordenação original As orientações publicadas para tabelas fornecem marcação e estilos, mas deixam explicitamente o comportamento de ordenação e busca a cargo da aplicação. A prévia inclui uma implementação original completa de ambos. Essa distinção importa: importar apenas o JavaScript do DKFDS não transforma qualquer tabela em uma visualização de dados com busca e ordenação. ## Valores Sass e ritmo básico do sistema de design Det Fælles Designsystem ### Interprete os mapas de origem como mapas de origem A referência registra valores Sass reais, em vez de inventar nomes --token. O mapa de espaçamento usa uma base de 8px, com chaves como 305 para 12px e 405 para 20px. O desenvolvedor deve usar o auxiliar da biblioteca ou as convenções de utilitários correspondentes, em vez de tratar esses números como pixels literais. A tabela de parâmetros deixa o mapeamento visível. ### Respeite a convenção de tamanho da fonte raiz O tamanho raiz padrão é 62.5%, respeitando a preferência de fonte do navegador. Por isso, o mapa de tamanhos de fonte de origem inclui 1.6rem para o tamanho padrão de texto pequeno/corpo, considerando o padrão habitual do navegador. Copiar um valor em rem para um ambiente com outro tamanho raiz pode alterar bastante o resultado. O exemplo carrega a folha de estilo real para manter consistentes o contexto tipográfico e o espaçamento. ## Estrutura semântica de tabela do sistema de design Det Fælles Designsystem ### Use uma legenda e defina claramente as funções das colunas A comparação de recursos tem uma legenda, cabeçalhos de coluna e células de dados comuns. Títulos, formatos, minutos numéricos e finalidades ficam em colunas separadas, pois os usuários comparam esses atributos. Os tempos de leitura são estimativas ilustrativas, criadas para o exemplo, e não estatísticas medidas de tráfego ou desempenho. A legenda deixa esse limite claro sem alterar a estrutura da tabela. - Inclua uma legenda útil e cabeçalhos de coluna. - Mantenha os dados numéricos como números no modelo da aplicação. - Identifique a região rolável e focável em telas estreitas. ### Mantenha a rolagem em dispositivos móveis dentro da tabela A tabela classificável fica em uma região responsiva de rolagem que pode receber foco. A largura mínima mantém as colunas legíveis, enquanto a página externa permanece dentro da área visível. O exemplo não transforma uma tabela classificável em cartões sem relação entre si em telas estreitas, pois isso exigiria outro padrão de navegação e controles de classificação. Usuários de teclado podem focar a região rolável. ## Sistema de design Det Fælles Designsystem: estado de classificação e comparação numérica ### Mantenha uma única ordenação ativa A coluna de título começa em ordem crescente. Ativar o mesmo cabeçalho inverte a ordem; selecionar a coluna de minutos começa em ordem crescente. Somente o cabeçalho ativo recebe aria-sort, e a instrução oculta de cada botão descreve a próxima ação. A seta visível espelha o mesmo estado, sem funcionar como decoração independente. ### Compare números como números Minutos são dados numéricos e são ordenados por subtração. Os títulos usam localeCompare. Ordenar strings numéricas alfabeticamente produziria ordens enganosas à medida que os valores aumentassem. Os objetos de linha originais continuam sendo a fonte da verdade, e a renderização usa textContent em vez de interpretar o conteúdo das linhas como marcação. ## Sistema de design Det Fælles Designsystem: busca enviada e recuperação de resultados vazios ### Aplique a consulta ao enviá-la Ao enviar o formulário, a busca filtra todos os atributos exibidos, inclusive quando o usuário pressiona Enter. Apenas digitar não substitui a tabela enquanto a pessoa lê. O status informa a quantidade de resultados visíveis e a ordenação atual, enquanto a consulta permanece no campo. Esse comportamento segue o modelo de busca enviada escolhido para este exemplo. ### Redefina a consulta sem perder a ordenação Uma consulta sem resultados exibe uma mensagem para orientar a recuperação. A redefinição restaura todas as linhas e coloca o foco no campo de busca, mantendo a coluna e a direção de classificação selecionadas. Assim, busca e ordenação continuam sendo variáveis de estado separadas. Não há um estado artificial de carregamento, pois o conjunto completo de cinco linhas já está disponível localmente. ## Sistema de design Det Fælles Designsystem: integração completa e funcional ### Carregue os recursos da distribuição sem alterar os caminhos O mapa de exportação do pacote 11.3.0 expõe sua entrada JavaScript, não importações profundas arbitrárias CSS. A configuração copia a distribuição para public/dkfds e vincula a folha de estilos em index.html, preservando os caminhos relativos das fontes e imagens. Salve main.js e denmark.css fornecidos ao lado dessa estrutura. A prévia local incorpora os mesmos recursos para permitir uma inspeção confiável. 1. Instale dkfds 11.3.0 e copie sua distribuição para public/dkfds. 2. Use a estrutura HTML fornecida para carregar a folha de estilos do Borger.dk. 3. Salve o arquivo completo e CSS e execute a aplicação local. 4. Verifique a ordenação numérica, a busca enviada, a redefinição e a rolagem interna em dispositivos móveis. ### Verifique todo o fluxo de comparação Ordene os minutos nos dois sentidos, envie uma consulta sem correspondências e redefina a busca. Pesquise por Template e confirme que restam apenas as duas linhas de modelos e que a ordem atual foi preservada. Na largura de celular, role a tabela internamente e confirme que a página não transborda. A verificação também confirma que todos os recursos incluídos são carregados e que não há erros no navegador. ## Det Fælles Designsystem Exemplos de componentes do sistema de design ### main.js — comportamento completo da comparação Dados originais completos, classificação numérica e textual, filtragem ao enviar e redefinição. ``` // 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(); ``` Referência de código - A classificação e a busca são código original da aplicação, conforme exigido pelo limite de integração da tabela publicado. ### denmark.css — composição original da página Controles de busca responsivos e região de rolagem da tabela focável pelo 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}} ``` Referência de código - Em telas estreitas, a tabela mantém a disposição em colunas dentro de uma região rolável. ### index.html — estrutura completa dos recursos da distribuição Carregue a folha de estilos publicada preservando os recursos relativos. ``` Planning resource comparison
``` Referência de código - Substitua o index.html raiz do Vite por esta estrutura. ## Det Fælles Designsystem Configuração do agente de IA para o sistema de design ### Ponto de partida para implementação A folha de estilos e as fontes oficiais funcionam localmente. A aplicação controla a classificação e a filtragem; não é necessário chamar DKFDS.init para aplicar os estilos estáticos desta tabela. ``` 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 ``` ### Um prompt para seu projeto ``` Crie a comparação de recursos do DKFDS usando a distribuição real 11.3.0 do Borger.dk e o contexto de fontes. Implemente a classificação completa e original de títulos e valores numéricos, um único cabeçalho aria-sort ativo, busca enviada, retorno da contagem e redefinição com preservação da ordenação. Mantenha a tabela rolável horizontalmente em sua própria região acessível pelo teclado. ``` ## Det Fælles Designsystem Fontes e escopo do sistema de design Uma comparação original OpenDesign que usa os estilos e as fontes do Borger.dk com DKFDS 11.3.0. A classificação, a busca e os dados de exemplo são código original completo da aplicação, não recursos integrados de tabela do DKFDS. - Orientações para a tabela Responsabilidades de marcação, rolagem, classificação e busca. - Pacote e temas Folhas de estilos da distribuição e limites de inicialização. - Ajuste do tema Configuração do tema no código-fonte. - Código-fonte versionado Mapas Sass, valores do tema e licenças dos recursos. ## Det Fælles Designsystem Recursos relacionados ao sistema de design ### sistema de design .italia Implemente uma sequência de serviços legível com a tipografia real, a estrutura responsiva Stepper e o estado local recuperável de formulário do Bootstrap Italia. ### Designsystemet Explore as funções reais de tema, os modos de tamanho e o comportamento nativo dos campos de Designsystemet por meio de um editor completo de briefing de tarefa, com indicação de caracteres e estado de apresentação preservado. ### DSFR Conheça a tipografia, a grade e o API de acordeão concretos do sistema do Estado francês, dentro de seu escopo institucional. Compare o comportamento de divulgação vinculada e independente em um exemplo educacional claramente neutro. - [Referência de implementação](https://designsystem.dk/komponenter/tables/) - [Fonte](https://github.com/detfaellesdesignsystem/dkfds-components) - [Referência de código](https://designsystem.dk/komponenter/tables/) - [Referência de código](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Orientações para a tabela Responsabilidades de marcação, rolagem, classificação e busca.](https://designsystem.dk/komponenter/tables/) - [Pacote e temas Folhas de estilos da distribuição e limites de inicialização.](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Ajuste do tema Configuração do tema no código-fonte.](https://designsystem.dk/kom-i-gang/implementering-kode/justering/) - [Código-fonte versionado Mapas Sass, valores do tema e licenças dos recursos.](https://github.com/detfaellesdesignsystem/dkfds-components)