Use o Nova CSS da Visa para criar uma opção clara de formato de extrato, com controles de opção nativos, cabeçalho em cor alternativa e resumo para revisão. Confira os valores exatos do tema 1.6.5, o espaçamento escalável e a integração completa da folha de estilos.
@visa/nova-styles 1.6.5 CSS nativo e tema Visa incorporados localmente; regras font-face remotas removidas e fontes do sistema utilizadas. Layout original da aplicação e script local. · Referência de implementação
02
Referência de design sistema de design Visa Product
Estilos publicados de @visa/nova-styles 1.6.5, tema Visa e metadados do exemplo. Os valores padrão/claros são separados das substituições para os temas alternativo e escuro. A prévia incorpora localmente o CSS oficial, remove as regras font-face remotas e usa fontes do sistema como alternativa.
Sistema de design Visa Product Uma tarefa de preferência com um resumo claro para conferência
Trate cada pergunta de forma independente
O exemplo pergunta o formato do extrato e a frequência do resumo. São grupos de opções separados: alterar a frequência não desmarca o formato. O resumo repete as duas escolhas antes da ação principal, para que o usuário possa conferir o resultado sem precisar interpretar um ícone ou um padrão oculto.
A confirmação da preferência registra apenas uma confirmação local. A página não solicita número de cartão, acessa uma conta, gera um extrato nem altera configurações de serviços financeiros. Assim, o exemplo mantém o foco no comportamento de seleção e feedback do sistema de design.
Sistema de design Visa Product Os estilos do Nova e o tema Visa são importados separadamente
A estrutura não compõe o tema inteiro
A instalação oficial indica styles.css seguido de themes/visa/index.css. O primeiro fornece as regras de componentes e utilitários; o segundo fornece o tema Visa. Carregar apenas um deles resulta em uma integração incompleta. Tanto o exemplo independente quanto o trecho de importação mantêm essa ordem.
O pacote verificado é a versão 1.6.5. O exemplo incorpora seu CSS localmente, sem depender de uma solicitação de folha de estilos a terceiros durante a visualização. As declarações font-face remotas são removidas e a aplicação usa explicitamente uma fonte do sistema como alternativa; trata-se do Nova CSS nativo com substituição de fonte informada, não de uma alegação de equivalência exata com uma fonte proprietária.
Sistema de design Visa Product As paletas padrão e alternativa incluem cores correspondentes para o primeiro plano
Não reutilize uma cor de preenchimento sem a função correspondente para o texto
A cor ativa padrão/clara é #1434cb, passa a #173be8 ao passar o cursor e a #0f2595 ao pressionar. A cor do texto sobre o estado ativo é branca. O contexto do tema alternativo altera o mapeamento das funções; por isso, o exemplo usa v-alternate na superfície do cabeçalho, em vez de substituir apenas a cor de fundo.
O destaque #fcc015 não é uma cor de preenchimento universal para botões. O contexto do tema determina como as funções de destaque e estado ativo são usadas. A tabela de referência descreve a paleta padrão; as definições posteriores para os temas escuro e alternativo na mesma folha de estilos não são combinadas em um conjunto de valores enganoso.
Sistema de design Visa Product Considere a escala rem em relação à raiz do tema
Uma raiz de tema de 14 pixels altera as suposições habituais sobre rem
O tema Visa define uma fonte raiz de 14 pixels. Portanto, headline-1, com valor aproximado de 2.285714rem, corresponde a 32 pixels nessa raiz, e não ao valor obtido supondo uma raiz de 16 pixels. body-1 equivale a aproximadamente 1.142857rem, enquanto body-2 equivale a 1rem.
Os tokens de tamanho escalável expressam uma quantidade em pixels multiplicada pelo fator de escala do tema. Contextos responsivos podem introduzir um segundo fator. Ao adaptar o espaçamento à aplicação, mantenha a expressão; copiar apenas o número calculado padrão elimina essa relação. O exemplo usa os utilitários oficiais de espaçamento nos controles de frequência e dimensões originais da aplicação no layout geral dividido.
Sistema de design Visa Product Semântica de opções nativas sob a apresentação do Nova
Um círculo estilizado não é um grupo de botões de opção
Os metadados públicos aplicam v-radio a um elemento input type="radio" real e o associam a um label. A prévia mantém essa estrutura nativa e envolve no label a descrição visível de cada opção. As teclas de seta permitem navegar pelo grupo, e o estado marcado continua disponível para o navegador e as tecnologias assistivas.
Um fieldset e um legend identificam cada pergunta. As opções de formato explicam suas consequências: um PDF é um exemplo para download, enquanto HTML é descrito como refluível. O conteúdo específico do produto é original; a estrutura dos controles e as classes vêm da biblioteca nativa.
Use um name para as duas opções de formato e outro para a frequência.
Mantenha o valor da opção separado do texto visível para que o resumo possa usar um rótulo estável.
Use os atributos checked e disabled para indicar o estado, em vez de apenas uma classe decorativa.
Sistema de design Visa Product O Nova CSS estiliza os controles; o HTML nativo gerencia a escolha
Mantenha a lógica de agrupamento e revisão fora da folha de estilos
O exemplo usa a classe v-radio do Nova em elementos de opção nativos. Atributos name iguais tornam as opções de formato mutuamente exclusivas, enquanto um name diferente separa o grupo de frequência. Fieldset e legend fornecem o contexto do grupo; um label associado inclui o texto completo da opção no nome acessível do controle.
O pacote CSS não escolhe uma opção, não gerencia a persistência dos dados do aplicativo nem cria um registro de revisão. O script fornecido lê os dois grupos nativos e monta um resumo local. Qualquer alteração limpa esse resumo, pois os valores anteriores já não representam a preferência atual.
Mantenha na implementação tanto a folha de estilos estrutural quanto o tema Visa. O cabeçalho alternativo usa v-alternate, enquanto o formulário permanece no contexto de cores padrão; não tente imitar o cabeçalho alterando apenas o plano de fundo e deixando os papéis de primeiro plano sem definição.
Sistema de design Visa Product Uma ordem de leitura em qualquer largura
Reposicione o resumo sem alterar a sequência da tarefa
Em telas largas, os grupos de opções e o resumo da seleção atual aparecem lado a lado. Em telas pequenas, o resumo fica depois do formulário. A ilustração original do documento é ocultada, pois não acrescenta informações à tarefa, enquanto todos os rótulos, as explicações e as ações são mantidos.
A biblioteca CSS oferece suporte a navegadores modernos evergreen. A documentação oficial de desenvolvimento não garante compatibilidade com navegadores legados; portanto, a equipe de produção deve testar as versões realmente suportadas, em vez de considerar uma visualização moderna bem-sucedida como garantia de compatibilidade universal.
Carregue a CSS estrutural fixada e o tema Visa; em seguida, adicione os estilos de layout do aplicativo.
Selecione Acessível HTML e Trimestral, revise a preferência e confirme que ambas aparecem no resumo.
Altere qualquer uma das opções, confirme que a mensagem de revisão é redefinida e, em seguida, teste Redefinir e o layout estreito.
CSS fornece a apresentação do componente; o pequeno script implementa o comportamento do aplicativo.
Alterar uma preferência limpa o status de revisão anterior.
O cabeçalho alternativo usa um contexto de tema real, não uma imitação da paleta feita à mão.
Salve o HTML completo como index.html e abra-o em um navegador com acesso aos URLs públicos fixados de CSS. A visualização incorporada neste guia mantém esses estilos localmente.
Carregue a estrutura e o tema juntos
Em um aplicativo empacotado, importe as duas camadas uma única vez, antes da folha de estilos do aplicativo.
A ausência do arquivo do tema pode deixar as classes estruturais presentes sem os tokens Visa esperados.
04
Configuração do agente sistema de design Visa Product
Ponto de partida para implementação
O HTML completo usa os caminhos verificados styles.css e themes/visa/index.css. Ambos são necessários. O iframe incorpora esses estilos localmente; as declarações oficiais de font-face foram omitidas.
shell / html
npm create vite@latest statement-preference -- --template vanilla
cd statement-preference
npm install
npm install @visa/[email protected]
# Replace index.html with the complete example below.
npm run dev
Um prompt para seu projeto
Prompt para agente de IA
Crie o exemplo de preferência de declaração Visa Nova com a CSS estrutural e o tema fixados. Preserve os grupos nativos de opções, as legends claras e os labels associados. Separe os papéis do tema padrão dos papéis do tema alternativo e considere a raiz de 14px ao interpretar valores em rem. Mantenha a revisão local, remova confirmações desatualizadas após alterações e empilhe o resumo em telas pequenas.
05
Fontes e escopo de sistema de design Visa Product
Guia independente de OpenDesign com CSS nativos do Nova. Esta tarefa fictícia de preferência não usa dados de conta nem altera nenhum serviço financeiro. A visualização informa que substitui as fontes por fontes do sistema.
