Use o contrato real de Switch de código aberto da Amsterdam, com um tema neutro completo, rótulos acessíveis e preferências de leitura aplicadas imediatamente.
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.
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.
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.
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.
Ative Texto maior e observe o tamanho do parágrafo no artigo ao lado.
Dê foco a Contraste reforçado e pressione Espaço para ativá-lo ou desativá-lo pelo teclado.
Restaure os padrões e confirme que os três switches e o artigo voltam ao estado inicial em conjunto.
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.
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.
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.
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.
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://.
bash
npm install @amsterdam/[email protected]
# 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
Prompt para agente de IA
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.
05
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.
