# Sistema de design Amsterdam ## Prévia da interface do sistema de design Amsterdam Ative o texto maior, o contraste reforçado e a redução de movimento na prévia; restaure os padrões. ## Referência de design do sistema de design Amsterdam Implementação de CSS e React4.4.0 analisada; limite entre tokens/recursos proprietários verificado. Todos os valores do tema da prévia são originais. ### Contrato do componente de código aberto | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | CSS package | @amsterdam/design-system-css 4.4.0 | Folha de estilos do Switch nativo usada sem alterações. | | Class anatomy | ams-switch; ams-switch__input; ams-switch__label | O input vem imediatamente antes do label correspondente. | | Input semantics | type=checkbox; role=switch | O estado nativo marcado representa ligado/desligado. | | Native behavior | Immediate binary setting | O código-fonte de React informa que não é necessário enviar o formulário. | | React props | InputHTMLAttributes | As propriedades checked, defaultChecked, onChange, disabled e ARIA são repassadas ao input. | | Focus | Input focus styles the following label | Não oculte o input real com display:none. | ### Tema neutro original completo do controle Switch | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ams-switch-inline-size | 50px | Largura original da trilha do Switch. | | --ams-switch-thumb-inline-size / block-size | 22px / 22px | Geometria original do indicador circular. | | --ams-switch-label-border-width | 3px | Recuo da trilha; a translação no estado marcado usa este valor. | | --ams-switch-background-color | #666 | Cor original da trilha no estado desligado. | | --ams-switch-checked-background-color | #286044 | Cor original da trilha no estado ligado; não é um token de marca do Amsterdam. | | --ams-switch-thumb-background-color | #fff | Cor original do indicador. | | --ams-switch-disabled-background-color | #aaa | Aparência desativada; a propriedade nativa disabled fornece o comportamento. | | --ams-switch-outline-offset | 4px | Separação do indicador de foco. | | --ams-switch-cursor / disabled-cursor | pointer / not-allowed | Configuração explícita da interação. | | --ams-switch-thumb-hover-box-shadow | 0 0 0 2px #fff | Tratamento original ao passar o cursor. | ### Tipografia e layout da aplicação | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Font / body | Arial / 18px with 1.5 leading | Configuração neutra original; sem recurso Amsterdam Sans. | | Heading | 36px; 30px below700px | Escolha da aplicação, não uma escala oficial de Amsterdam. | | Layout | 900px maximum; two columns with32px gap | Escolha da aplicação; uma coluna abaixo de 700px. | | Larger reading mode | 22px article text | Preferência local, não substitui o zoom global do navegador. | | Reduced motion | OS preference plus local preview setting | O componente CSS já respeita prefers-reduced-motion em suas transições. | ### Limites de reutilização e identidade | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Component code | EUPL-1.2 or later | Mantenha a licença e os avisos aplicáveis. | | Documentation | CC0-1.0 | Mantenha separado dos recursos proprietários. | | Token package4.3.0 | Proprietary assets | A licença própria o exclui da licença de código aberto. | | Amsterdam Sans / icons / logo | Restricted institutional assets | Não foi copiado para este exemplo independente. | ## Guia completo do sistema de design Amsterdam 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. ## Componente e tema separados do sistema de design Amsterdam ### Use a camada de código aberto com transparência > Amsterdam publica o componente CSS separadamente, permitindo implementar seu contrato de classes fora de React. A folha de estilos depende das propriedades personalizadas de CSS; importá-la sem um tema completo deixa dimensões e cores importantes sem definição. Por isso, a folha de estilos nativa de Switch neste exemplo vem acompanhada de uma configuração neutra original e completa. O repositório separa os pacotes de código aberto dos recursos proprietários. O pacote de tokens inspecionado, na versão 4.3.0, tem um aviso de licença próprio que o exclui da licença de código aberto. Amsterdam Sans, os ícones e o logotipo da cidade também estão sujeitos a restrições específicas. Este guia menciona sua existência como contexto, mas não os redistribui nem afirma que um download público pelo npm concede direitos irrestritos de uso da marca. Consulte a especificação de apoio ## Uma configuração neutra completa do sistema de design Amsterdam ### Forneça todas as propriedades necessárias ao componente A tabela de referência identifica todas as variáveis usadas pela folha de estilos Switch selecionada. Largura, dimensões do botão deslizante, largura da borda, cores, deslocamento do contorno, cursor e tratamento ao passar o mouse têm valores explícitos. Esses são valores originais deste exemplo, não tokens de design de Amsterdam copiados. Essa distinção permite reproduzir o exemplo sem precisar adivinhar valores ausentes no tema. A trilha tem 50px de largura, com um botão deslizante de 22px e uma borda de 3px. A transformação nativa do estado marcado calcula o deslocamento com base na largura do botão e na largura da borda. Alterar apenas a largura da trilha pode deixar o botão desalinhado; ajuste as dimensões relacionadas em conjunto e verifique os dois estados. ``` :root { --ams-switch-label-border-width:3px; --ams-switch-background-color:#666; --ams-switch-thumb-background-color:#fff; --ams-switch-thumb-inline-size:22px; --ams-switch-thumb-block-size:22px; --ams-switch-inline-size:50px; --ams-switch-checked-background-color:#286044; --ams-switch-disabled-background-color:#aaa; --ams-switch-disabled-cursor:not-allowed; --ams-switch-cursor:pointer; --ams-switch-outline-offset:4px; --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff; } ``` Referência de código Consulte a especificação de apoio ## Anatomia do Switch nativo do sistema de design Amsterdam ### O rótulo deve vir depois do input A implementação de React renderiza um contêiner, um input e um label associado sem texto. O CSS usa seletores de irmãos adjacentes para estilizar o label conforme os estados de foco, marcado e desativado do input. Mantenha essa ordem em uma implementação simples de HTML; inserir uma descrição entre o input e o label interrompe esses seletores. O input real é um checkbox com role="switch". Ele mantém a propriedade checked nativa e o comportamento de teclado. Como o label visual não tem texto, forneça um nome acessível usando aria-label ou aria-labelledby. O exemplo referencia um título de configuração visível e associa sua explicação por meio de aria-describedby. ``` Larger text

Increase the article text size immediately.

``` Referência de código Consulte a especificação de apoio ## Configurações imediatas do sistema de design Amsterdam ### Um switch altera a visualização atual O código-fonte do componente define Switch como uma configuração binária imediata. A demonstração segue esse contrato: o texto maior altera o tamanho do artigo, o contraste reforçado altera o texto e o contorno, e a opção de movimento reduzido remove o breve efeito de aparição do aviso. Não há um botão Salvar que finja enviar essas escolhas locais a um serviço de conta. Restaurar padrões desmarca os três controles nativos e reaplica as classes padrão do artigo. Uma mensagem de status descreve as configurações ativadas. Nada é mantido após a navegação ou o recarregamento. Um serviço de preferências de produção poderia acrescentar persistência, mas deveria informar se a configuração afeta esta página, um dispositivo ou uma conta. 1. Ative Texto maior e observe o tamanho do parágrafo no artigo ao lado. 2. Dê foco a Contraste reforçado e pressione Espaço para ativá-lo ou desativá-lo pelo teclado. 3. Restaure os padrões e confirme que os três switches e o artigo voltam ao estado inicial em conjunto. Consulte a especificação de apoio ## Teclado, foco e movimento no sistema de design Amsterdam ### Mantenha o input nativo disponível A folha de estilos reduz a largura visual do input, mas mantém o controle real. Seu seletor de foco aplica o contorno ao label seguinte. Substituir o input por uma div decorativa descartaria a semântica nativa de formulário e exigiria uma implementação separada para o teclado. Não aplique display:none ao input. A folha de estilos nativa limita as transições a prefers-reduced-motion:no-preference. O efeito no artigo também respeita a preferência do sistema operacional, independentemente do controle local. Quem solicita menos movimento no nível do sistema não deveria precisar descobrir um switch adicional para que o exemplo se comporte de maneira mais tranquila. - Use a propriedade checked como fonte da verdade; não invente um estado visual ativo sem relação com ela. - Forneça um nome estável para cada configuração e associe sua explicação ao input. - Teste os estados desativado, ativado, em foco e indisponível após alterar as dimensões ou as cores do tema. Consulte a especificação de apoio ## Composição da demonstração de leitura do sistema de design Amsterdam ### Demonstre o efeito ao lado do controle O exemplo usa uma composição em duas colunas para que cada configuração tenha um efeito visível no artigo. Abaixo do ponto de interrupção de 700px, específico da aplicação, os controles são empilhados antes da demonstração. A largura máxima de 900px e o espaçamento de 32px são decisões originais de layout, não evidências de um token de grade usado em toda a cidade. A fonte neutra é Arial. O texto do corpo tem 18px e entrelinha de 1.5; o modo de texto maior altera apenas o artigo para 22px. Este é um exemplo de configuração da aplicação, não um substituto para o zoom do navegador nem uma afirmação de que esses tamanhos são prescritos por Amsterdam. Rótulos longos quebram linha sem reduzir a largura do switch nativo. Consulte a especificação de apoio ## Integração de CSS ou React ao sistema de design Amsterdam ### Escolha a camada de implementação Em uma aplicação existente de React, o Switch verificado aceita atributos padrão do input e encaminha a ref ao input. Para uso controlado, informe checked e onChange; para uso não controlado, é possível informar defaultChecked. O componente não fornece armazenamento para a aplicação nem um API de preferências da conta. Para este exemplo independente de HTML, é necessário apenas o Switch de código aberto CSS. As instruções de configuração e o código completo incluem a configuração de tema ausente e o gerenciamento do estado local. O instalador de pacotes pode baixar recursos proprietários como dependências; a presença deles no disco não autoriza sua importação nem distribuição. O exemplo incluído contém apenas o CSS selecionado e sua licença de código aberto. Consulte a especificação de apoio ## Adoção e limitações do sistema de design Amsterdam ### Não confunda semelhança visual com afiliação O sistema da cidade foi criado para tornar os produtos municipais consistentes e acessíveis. Seu código reutilizável pode ser estudado e adaptado nos termos de sua licença, mas o logotipo, a fonte proprietária e os ícones têm condições de uso próprias. A prévia usa uma identidade visual original e conteúdo neutro para não ser confundida com um serviço de Amsterdam. O escopo verificado abrange um componente nativo com um tema personalizado completo e comportamento local significativo. Não é uma reimplementação completa do tema da cidade. Um produto real que adote o pacote mais amplo de CSS deve definir e testar todas as variáveis exigidas pelos componentes adicionais, em vez de extrapolar a configuração deste Switch para controles não relacionados. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design Amsterdam ### Tema neutro completo para Switch Todas as variáveis exigidas pela folha de estilos nativa estão definidas; todos os valores são originais. ``` :root { --ams-switch-label-border-width:3px; --ams-switch-background-color:#666; --ams-switch-thumb-background-color:#fff; --ams-switch-thumb-inline-size:22px; --ams-switch-thumb-block-size:22px; --ams-switch-inline-size:50px; --ams-switch-checked-background-color:#286044; --ams-switch-disabled-background-color:#aaa; --ams-switch-disabled-cursor:not-allowed; --ams-switch-cursor:pointer; --ams-switch-outline-offset:4px; --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff; } ``` Referência de código ### Estrutura nativa acessível Entrada de caixa de seleção real, função de switch e rótulo visual adjacente. ``` Larger text

Increase the article text size immediately.

``` Referência de código ### Preferências de leitura completas e imediatas Switch nativo CSS, tema personalizado e efeitos locais visíveis. ``` Reading preferences

PERSONAL READING VIEW

Make this page easier to read

Settings apply immediately to the preview. They are not saved after you leave.

Larger text

Increase the article text size.

Stronger contrast

Use black text and a stronger outline.

Reduce preview motion

Remove the short badge appearance effect.

Default reading settings.

Reading preview

A quieter place to read

A community reading room offers shared tables, individual seats and a small collection of reference books.

Before visiting, check opening hours and ask about any facilities you need.

Original example content · no external service

``` Referência de código ## Configuração do agente do sistema de design Amsterdam ### Ponto de partida para implementação Apenas o CSS de código aberto; tema original completo e HTML funcional a seguir. Nenhum pacote proprietário de tokens ou recursos é distribuído. O ZIP completo do exemplo funcional, disponível em Fontes, também inclui as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/amsterdam.html. Não abra exemplos baseados em módulos usando file://. ``` npm install @amsterdam/design-system-css@4.4.0 # Copy dist/switch/switch.css into your public assets. # Load it before the complete original theme configuration below. # Do not import the proprietary assets or tokens for this neutral example. ``` ### Um prompt para seu projeto ``` Use o Switch de código aberto CSS de Amsterdam com um tema original completo. Preserve a estrutura de contêiner, entrada e rótulo adjacente, a função role=switch e um nome acessível. Aplique as configurações binárias imediatamente e use checked como estado. Respeite a preferência por movimento reduzido e diferencie preferências locais das configurações salvas na conta. Não importe tokens, fontes, logotipos ou ícones proprietários sem os direitos correspondentes. ``` ## Fontes e escopo do sistema de design Amsterdam Exemplo independente de OpenDesign. Os tokens de marca de Amsterdam, a fonte Amsterdam Sans, os ícones oficiais e o logotipo não estão incluídos. - Repositório e licenças Pacotes de código aberto e separação de recursos proprietários. - Contrato de CSS Arquitetura de classes, uso de CSS e dependências do tema. - Documentação do Switch Semântica de configuração binária imediata. - Aviso sobre recursos Restrições de fontes, ícones, identidade visual e logotipo. - Escopo do pacote de tokens Camada separada de tokens proprietários. - Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação. ## Recursos relacionados ao sistema de design Amsterdam ### B.C. sistema de design Crie um formulário de preferências de lembrete no estilo B.C., com tokens semânticos reais, controles Aria nativos de React, campos de contato condicionais e comportamento completo de validação. ### Canada.ca sistema de design Explore a tipografia, os tokens semânticos e os componentes web nativos do GC Design System por meio de um guia de preparação completo e pesquisável, com comportamento de divulgação e estado vazio. ### CFPB sistema de design Implemente a grade editorial, a tipografia atual e os componentes Expandables nativos do CFPB com uma planilha de leitura funcional, APIs de pacotes verificadas e limites de identidade explícitos. - [Referência de implementação](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Fonte](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Fonte](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md) - [Consulte a especificação de apoio](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md) - [Referência de código](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Consulte a especificação de apoio](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Referência de código](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Consulte a especificação de apoio](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Repositório e licenças Pacotes de código aberto e separação de recursos proprietários.](https://github.com/Amsterdam/design-system) - [Contrato de CSS Arquitetura de classes, uso de CSS e dependências do tema.](https://github.com/Amsterdam/design-system/tree/develop/packages/css) - [Documentação do Switch Semântica de configuração binária imediata.](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs) - [Aviso sobre recursos Restrições de fontes, ícones, identidade visual e logotipo.](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md) - [Escopo do pacote de tokens Camada separada de tokens proprietários.](https://github.com/Amsterdam/design-system/tree/develop/packages-proprietary/tokens)