# Sistema de design Queensland Government ## Sistema de design Queensland Government Prévia da interface Selecione recursos ilustrados, confira os nomes em um modal nativo e edite a lista local. ## Sistema de design Queensland Government Referência de design Exports reais de @qld-gov-au/qgds-bootstrap5 2.4.1 CSS e comportamento do modal Bootstrap, com Noto Sans carregada localmente. ### Paleta clara padrão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --qld-color-default-color-light-action-primary | #005eb8 | Função clara real do QGDS Bootstrap 2.4.1. Use com a superfície clara correspondente. | | --qld-color-default-color-light-action-primary-hover | #003e96 | Função clara real do QGDS Bootstrap 2.4.1. Use com a superfície clara correspondente. | | --qld-color-default-color-light-background-default | #ffffff | Função clara real do QGDS Bootstrap 2.4.1. Use com a superfície clara correspondente. | | --qld-color-default-color-light-background-alt | #e3e7ea | Função clara real do QGDS Bootstrap 2.4.1. Use com a superfície clara correspondente. | | --qld-color-default-color-light-focus-default | #002e85 | Função clara real do QGDS Bootstrap 2.4.1. Use com a superfície clara correspondente. | | --qld-color-default-color-light-link-default | #005eb8 | Função clara real do QGDS Bootstrap 2.4.1. Use com a superfície clara correspondente. | | --qld-color-default-color-light-link-visited | #551a8b | Função clara real do QGDS Bootstrap 2.4.1. Use com a superfície clara correspondente. | | --qld-color-default-color-light-text-default | #353535 | Função clara real do QGDS Bootstrap 2.4.1. Use com a superfície clara correspondente. | | --qld-color-default-color-light-text-heading | #000053 | Função clara real do QGDS Bootstrap 2.4.1. Use com a superfície clara correspondente. | ### Paleta escura padrão | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --qld-color-default-color-dark-action-primary | #84d3ff | Função escura correspondente real; não reutilize um primeiro plano claro sobre uma superfície escura sem verificar o par previsto. | | --qld-color-default-color-dark-action-primary-hover | #a6f7ff | Função escura correspondente real; não reutilize um primeiro plano claro sobre uma superfície escura sem verificar o par previsto. | | --qld-color-default-color-dark-background-default | #005eb8 | Função escura correspondente real; não reutilize um primeiro plano claro sobre uma superfície escura sem verificar o par previsto. | | --qld-color-default-color-dark-background-alt | #001d74 | Função escura correspondente real; não reutilize um primeiro plano claro sobre uma superfície escura sem verificar o par previsto. | | --qld-color-default-color-dark-focus-default | #c6ffff | Função escura correspondente real; não reutilize um primeiro plano claro sobre uma superfície escura sem verificar o par previsto. | | --qld-color-default-color-dark-link-default | #ffffff | Função escura correspondente real; não reutilize um primeiro plano claro sobre uma superfície escura sem verificar o par previsto. | | --qld-color-default-color-dark-link-visited | #f2cdff | Função escura correspondente real; não reutilize um primeiro plano claro sobre uma superfície escura sem verificar o par previsto. | | --qld-color-default-color-dark-text-default | #ffffff | Função escura correspondente real; não reutilize um primeiro plano claro sobre uma superfície escura sem verificar o par previsto. | | --qld-color-default-color-dark-text-heading | #ffffff | Função escura correspondente real; não reutilize um primeiro plano claro sobre uma superfície escura sem verificar o par previsto. | ### Corpo do texto, cantos e geometria do modal | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --qld-body-font-family | var(--qld-font-sans-serif) | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | | --qld-body-font-size | 1rem | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | | --qld-body-line-height | 1.5 | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | | --qld-border-radius | .25rem | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | | --qld-border-radius-sm | .25rem | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | | --qld-border-radius-lg | .25rem | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | | --qld-border-radius-xl | 1rem | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | | --qld-border-radius-xxl | 2rem | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | | --qld-border-radius-pill | 50rem | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | | --qld-modal-border-radius | var(--qld-border-radius-lg) | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | | --qld-modal-title-line-height | 1.5 | Valor exportado pela implementação. As cores originais das ilustrações dos recursos e os cantos de 8px dos cartões são escolhas do exemplo, não tokens adicionais do tema oficial. | ## Sistema de design Queensland Government Guia completo 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. ## Sistema de design Queensland Government Escolha uma implementação do Queensland ### Identifique precisamente o ambiente de execução > O Queensland documenta vários caminhos de implementação. Este estudo usa o pacote público @qld-gov-au/qgds-bootstrap5 na versão 2.4.1, com o comportamento do modal Bootstrap. Ele não afirma usar a linha mais recente de componentes web Lit. Manter visíveis o nome e a versão da implementação evita que leitores confundam componentes com nomes semelhantes, mas regras de inicialização incompatíveis. ### Separe exemplos estáveis de linhas em desenvolvimento O repositório oficial de componentes web identifica a linha atual como alfa, enquanto o caminho Vanilla mais antigo é uma implementação de referência separada. O exemplo executável segue um único caminho testado baseado em Bootstrap. Uma migração futura deve verificar novamente a marcação, os nomes dos tokens e os contratos dos componentes, em vez de apenas substituir a URL de uma folha de estilos. ## Sistema de design Queensland Government Funções do tema e ilustração dos recursos ### Leia em conjunto as funções claras e escuras A tabela de parâmetros inclui pares de funções para temas claro e escuro do pacote real. As ações principais, as cores dos links, o foco e as funções de texto mudam conforme o contexto da superfície. O pacote de recursos atual usa uma composição clara; as entradas escuras são valores de referência, não indicam que a página tenha um controle para alternar o tema. ### Use ilustrações sem inventar tokens de marca Cada cartão contém um desenho original de documento numerado. Os quatro fundos suaves das ilustrações diferenciam os tipos de recurso criados para o exemplo. Essas cores e o raio externo de 8px dos cartões fazem parte do estilo da aplicação e são identificados separadamente da tabela de funções publicada. A biblioteca fornece os botões reais, o tratamento das caixas de seleção e o estilo do modal, que servem de base para a interface. ## Sistema de design Queensland Government Escala tipográfica e conteúdo dos cartões ### Carregue a fonte usada no corpo do texto A função de corpo do texto do pacote usa a família sem serifa com tamanho de 1rem e entrelinha de 1.5. A prévia carrega as fontes Noto Sans localmente para não depender de uma solicitação remota ao Google Fonts. Títulos, descrições e o status de quantidade selecionada continuam legíveis quando os cartões passam a uma única coluna. ### Descreva cada recurso de forma útil Cada cartão identifica um tipo, um tempo estimado de leitura ilustrativo, um título concreto e uma finalidade breve. As durações são estimativas criadas para a oficina, não dados de análise de uso. O rótulo da seleção repete o nome do recurso para que a ação continue clara quando encontrada separadamente por uma tecnologia assistiva. O cartão inteiro não se torna uma área de clique ambígua. ## Sistema de design Queensland Government Seleção por caixas de seleção e feedback derivado ### Mantenha a ação de revisão indisponível quando não houver seleção Caixas de seleção independentes permitem qualquer combinação dos quatro recursos. Um Set armazena os índices selecionados; a quantidade e a lista de revisão são derivadas desse estado. A revisão da seleção fica desativada enquanto o Set estiver vazio. Assim, evita-se abrir um diálogo sem conteúdo útil, e a contagem zero visível explica o motivo. - Use caixas de seleção independentes para uma lista com vários recursos. - Derive a quantidade selecionada dos mesmos dados usados no diálogo. - Identifique o recurso no rótulo de cada caixa de seleção. ### Limpe a confirmação anterior quando houver alterações Depois de uma confirmação local, selecionar ou remover outro recurso oculta o resultado anterior. O resumo não pode continuar visível como se refletisse a lista editada. Limpar a lista redefine tanto o Set quanto as caixas de seleção propriamente ditas e, em seguida, devolve o foco à primeira opção. A prévia não gera nem transmite arquivos. ## Sistema de design Queensland Government Diálogo de revisão e retorno do foco ### Use o modal nativo para delimitar a revisão A instância do modal Bootstrap abre um diálogo identificado pelo título. O corpo contém os nomes dos recursos selecionados no momento, e as ações permitem continuar editando ou confirmar localmente. Escape e o controle de fechar dispensam o diálogo. A aplicação devolve o foco a Revisar seleção quando o evento nativo de ocultação é disparado. ### Evite corridas desnecessárias durante as transições O exemplo omite a classe opcional fade. Assim, uma confirmação rápida ou a tecla Escape fecha o diálogo imediatamente, em vez de ser ignorada enquanto a transição de abertura ainda está em andamento. O modal continua gerenciando o foco e o comportamento do fundo sobreposto. Não se deve depender do movimento para entender se uma ação de revisão foi concluída. ## Sistema de design Queensland Government Implementação completa do pacote de recursos ### Recrie o estudo local exato Crie um projeto Vanilla com Vite e instale o pacote QGDS Bootstrap fixado, junto com Bootstrap e Noto Sans. Use o caminho exportado qld.bootstrap.css do pacote, em vez de presumir um caminho interno em dist. Salve o arquivo de entrada completo e queensland.css com um elemento raiz de montagem. O código-fonte inclui todos os registros de recursos, as ilustrações SVG originais, a lógica de seleção e as transições do modal. 1. Instale o pacote QGDS Bootstrap fixado e a fonte pública. 2. Use o caminho exportado da folha de estilos com o arquivo de entrada completo e CSS. 3. Selecione dois recursos e teste Escape e o retorno do foco. 4. Confirme localmente, edite a seleção e verifique se o resultado anterior é limpo. ### Defina regras intencionais para transições do modal e foco O caminho QGDS Bootstrap usa o modal Bootstrap, portanto o fechamento deve seguir o ciclo de vida nativo do modal. Devolva o foco a Revisar seleção após hidden.bs.modal, em vez de estimar um atraso. Se fade for adicionado depois, leve em conta o período de transição: uma solicitação imediata de ocultação durante a abertura pode ser ignorada. Gere a lista de revisão com base na seleção atual ao abrir o modal e invalide qualquer confirmação local anterior quando uma caixa de seleção mudar. Escape deve dispensar a revisão sem alterar as seleções. Manter as áreas de interação das caixas de seleção separadas das ilustrações dos cartões evita comportamentos concorrentes de clique no cartão inteiro e dá a cada recurso um rótulo de seleção acessível e preciso. ## Sistema de design Queensland Government Exemplos de componentes do sistema de design ### main.js — seleção completa de recursos e revisão no modal Dados originais completos, ilustrações, estado das caixas de seleção e integração com o modal nativo. ``` import Modal from 'bootstrap/js/dist/modal'; import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css'; import '@fontsource/noto-sans/latin-400.css'; import '@fontsource/noto-sans/latin-700.css'; import './queensland.css'; const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`

QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY

Build a workshop resource pack

Choose useful sample resources, then review your local selection. No files are requested or sent.

0 resources selected

${resources.map(([title,desc,type,time],i)=>`

${type} · ${time}

${title}

${desc}

`).join('')}
`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()}); ``` Referência de código - A folha de estilos do pacote usa um ponto de entrada exportado. A confirmação local não baixa arquivos nem envia dados a um serviço. ### queensland.css — composição original dos cartões Cartões responsivos e desenhos decorativos de documentos ao redor dos estilos dos componentes nativos. ``` body{margin:0}main{max-width:1200px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:26ch}.lead{max-width:65ch}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ccc;margin-bottom:24px}.selection-bar p{margin:0;font-weight:700}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.resource-card{border:1px solid #ccc;border-radius:8px;overflow:hidden}.card-body{padding:24px}.card-body h2{font-size:24px;line-height:1.3}.meta{font-size:14px}.art{height:130px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:#eaf4f7;color:#005e85}.art-1{background:#eef3ea;color:#3b6738}.art-2{background:#f4eef7;color:#6b427b}.art-3{background:#faf0e4;color:#8c592b}.art span{font-size:36px;font-weight:700}.art svg{width:160px;height:90px;fill:none;stroke:currentColor;stroke-width:3}.form-check{margin-top:24px}.modal-title{margin:0}.modal li{margin:12px 0}#result{margin-top:32px;padding:24px;background:#eef5f3;border-left:4px solid #20775b}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.resource-grid{grid-template-columns:1fr}.selection-bar{align-items:start;flex-direction:column}.art{height:110px}h1{font-size:34px}} ``` Referência de código - As cores das ilustrações e a geometria externa dos cartões são escolhas originais da aplicação. ## Sistema de design Queensland Government Configuração do agente ### Ponto de partida para implementação A prévia incorpora recursos de fontes públicas e executa o comportamento do modal nativo; não há implementação de envio ao servidor. ``` npm create vite@latest qld-resource-pack -- --template vanilla cd qld-resource-pack npm install npm install @qld-gov-au/qgds-bootstrap5@2.4.1 bootstrap@5.3.8 @fontsource/noto-sans # Replace src/main.js and add src/queensland.css. Keep
. npm run dev ``` ### Um prompt para seu projeto ``` Crie o estudo do pacote de recursos de Queensland com QGDS Bootstrap 2.4.1, funções reais da paleta e o Modal nativo. Preserve os rótulos das caixas de seleção, a contagem derivada, a revisão desativada quando estiver vazia, Escape, o retorno do foco e a limpeza de resultados obsoletos. Mantenha as ilustrações originais distintas dos tokens oficiais do tema e não sugira que haja entrega real de recursos. ``` ## Sistema de design Queensland Government Fontes e escopo Um estudo original de pacote de recursos OpenDesign que usa QGDS Bootstrap 2.4.1. Esta é a implementação Bootstrap, não o fluxo alfa de componentes web; as seleções são locais e nenhum recurso é enviado. - Caminhos de implementação Opções Vanilla, Bootstrap e de componentes web em desenvolvimento. - Fonte versionada do Bootstrap CSS publicado, recursos e implementação. - Orientações para cartões Hierarquia do conteúdo e uso de cartões. - Status dos componentes web Status alfa explícito e contrato de integração separado. ## Sistema de design Queensland Government Recursos relacionados ### Ripple Explore as funções de cor reais de Ripple, sua escala de espaçamento de 14 etapas e referências tipográficas responsivas em uma linha do tempo completa de oficina, com exibição progressiva de informações, progresso e foco no próximo passo pelo teclado. ### Scottish Government sistema de design Aplique a tipografia responsiva, o espaçamento e as funções de cor do governo escocês em um campo nativo com contagem de caracteres, que preserva o texto acima do limite e permite corrigir o conteúdo. ### Singapore Government sistema de design Use os Web Components atuais do SGDS com tokens responsivos reais, temas diurno e noturno e quantidades nativas com limites que mantêm um plano local sincronizado. - [Referência de implementação](https://github.com/qld-gov-au/qgds-bootstrap5) - [Fonte](https://github.com/qld-gov-au/qgds-bootstrap5) - [Referência de código](https://github.com/qld-gov-au/qgds-bootstrap5) - [Referência de código](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [Caminhos de implementação Opções Vanilla, Bootstrap e de componentes web em desenvolvimento.](https://www.designsystem.qld.gov.au/get-started/developing) - [Fonte versionada do Bootstrap CSS publicado, recursos e implementação.](https://github.com/qld-gov-au/qgds-bootstrap5) - [Orientações para cartões Hierarquia do conteúdo e uso de cartões.](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [Status dos componentes web Status alfa explícito e contrato de integração separado.](https://github.com/qld-gov-au/qgds-web-components)