# Sistema de design Adobe Spectrum ## Prévia da interface do sistema de design Adobe Spectrum Inspecione três variantes originais da arte, selecione um lote para exportação e prepare uma receita local para PNG ou JPEG. ## Referência de design do sistema de design Adobe Spectrum APIs do Spectrum v3 do React e mapeamentos de dimensões. A coluna de dimensão numérica registra a conversão de base na tabela de migração da Adobe; os valores size-* sensíveis à escala podem se adaptar ao toque. Esta não é uma exportação de tokens do Spectrum 2. As cores da prévia e as artes personalizadas são escolhas da aplicação. ### Configuração do Provider e do tema | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | theme | defaultTheme | Objeto de tema raiz obrigatório, importado de @adobe/react-spectrum. | | colorScheme | light \| dark | Substituição explícita da preferência do sistema operacional. | | scale | medium \| large | Escala para ponteiros finos ou grosseiros; normalmente, deixe o Provider escolher. | | locale | BCP 47 language tag | Contexto de localidade e direção de escrita. | | breakpoints | custom name → pixel width | Este guia define explicitamente tablet: 640 e desktop: 1024, evitando padrões conflitantes na página de referência. | | isDisabled / isReadOnly | boolean group defaults | Providers aninhados e props individuais podem substituir o comportamento do grupo. | ### Mapeamentos de dimensão de base | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | size-50 | 4px base | Pequeno espaçamento. | | size-100 | 8px base | Controles relacionados. | | size-150 | 12px base | Espaçamento da barra de ferramentas. | | size-200 | 16px base | Espaçamento entre grupos do inspetor. | | size-250 | 20px base | Espaçamento intermediário. | | size-300 | 24px base | Recuo do painel. | | size-400 | 32px base | Agrupamento mais amplo. | | size-500 | 40px base | Separação entre seções. | | size-600 | 48px base | Estrutura ampla. | | size-1000 | 80px base | Área de ilustração com tamanho fixo. | | size-2400 | 192px base | Largura de exemplo do inspetor. | | size-6000 | 480px base | Superfície ampla com limites definidos. | ### Props de estilo e valores adaptáveis | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | marginStart / marginEnd | DimensionValue | Espaçamento lógico; prefira-o a left/right para oferecer suporte à direção de escrita. | | padding / backgroundColor | View style props | Crie uma superfície externa personalizada em vez de substituir os elementos internos dos controles nativos. | | width | size-* \| CSS length \| calc(...) | Exemplo: calc(100% - size-2000). | | responsive value | {base: value, tablet: value} | As chaves correspondem aos breakpoints explícitos do Provider. | | UNSAFE_style / UNSAFE_className | last-resort escape hatch | Não dependa do DOM nem dos estilos privados dos componentes. | | single-line-height | 32 base mapping | Use a dimensão semântica em vez de afirmar que todos os controles têm sempre 32 px. | ### Contrato de seleção da coleção | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | selectionMode | none \| single \| multiple | O exemplo usa multiple para selecionar um lote. | | selectedKeys | Set of row keys \| all | O estado controlado precisa tratar o valor especial all. | | onSelectionChange | callback with selection | Não interprete a seleção como aprovação nem como confirmação de exportação. | | disallowEmptySelection | boolean | Útil quando uma seleção única é obrigatória; omitido para lotes de exportação opcionais. | | TableHeader → Column | column anatomy | Use chaves estáveis para as colunas na renderização dinâmica. | | TableBody → Row → Cell | row anatomy | Os IDs dos registros estabelecem uma identidade estável para a coleção. | ### Composição de Picker e texto | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | label | persistent text | Dê um nome ao seletor de formato de exportação. | | selectedKey | one item key | Formato controlado, como png ou jpeg. | | onSelectionChange | key callback | Contrato diferente do de um manipulador de eventos do DOM. | | Item key | stable key | Identidade do valor independente do rótulo visível. | | Heading level | 1–6 | Nível semântico do título; a estilização nativa depende do contexto. | | Button onPress | press callback | Ativação por diferentes tipos de entrada, em vez de uma ação personalizada que funciona apenas com o mouse. | ## Adobe Spectrum Guia completo do sistema de design 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 Adobe Spectrum: escolha a v3 de forma intencional; não misture gerações do Spectrum ### O que este exemplo instala > A Adobe agora documenta o Spectrum 2 junto com a biblioteca v3. Esta página escolhe @adobe/react-spectrum@3 porque os contratos de Provider, coleção e props de estilo formam um exemplo completo e documentado de revisão de ativos. Uma receita para v3 é útil em uma aplicação v3 existente, mas não deve ser apresentada como a implementação mais recente do Spectrum. Antes de decidir por uma nova adoção, consulte a referência de migração vinculada para escolher uma geração. A diferença prática fica evidente no código. A v3 passa size-300 por meio das props de estilo e fornece defaultTheme ao Provider. O guia de migração mapeia essas convenções para um API de estilização diferente. Trocar apenas o nome do pacote não migraria o exemplo; é preciso revisar em conjunto as importações de componentes, a estilização e as propriedades compatíveis. Consulte a especificação de apoio ## Adobe Spectrum O Provider do sistema de design coordena aparência, escala e localidade ### Uma raiz, várias configurações independentes O Provider estabelece o ambiente usado pela tabela, pelo seletor e pelo botão. O objeto de tema reúne as definições de esquema de cores e escala. colorScheme pode substituir a preferência do sistema operacional, enquanto scale considera as características dos dispositivos de entrada. São configurações distintas: uma superfície escura no desktop não exige alvos de toque grandes, e uma tela sensível ao toque clara não deve herdar acidentalmente um layout denso, pensado para o mouse. Em uso normal na produção, deixe a escala no modo automático. Em um estudo de componentes, escolher explicitamente medium ou large pode ajudar a comparar os controles, mas isso deve ser descrito como uma configuração de inspeção. locale define o contexto de idioma, não traduz os dados do projeto. Os nomes de campanhas, as observações de revisão e os rótulos de receitas continuam sendo conteúdo da aplicação. Consulte a especificação de apoio ## Sistema de design Adobe Spectrum: use dimensões compatíveis e props de layout externo ### Uma escala nomeada é mais do que uma forma abreviada de indicar pixels O mapeamento base de size-100 é 8, o de size-200 é 16 e o de size-300 é 24. A tabela de referência inclui outras etapas úteis. Uma dimensão size-* pode se adaptar à escala da plataforma; um valor static-size-* não se adapta intencionalmente. Mantenha essa distinção ao definir o tamanho de um inspetor ou de um alvo de interação. Copiar todos os valores resolvidos para desktop em CSS eliminaria a adaptação fornecida pelo ambiente do componente. Flex e View dão ao exemplo uma estrutura externa estável sem reescrever os elementos internos de TableView. A tabela pode crescer com flex e encolher com minWidth={0}; no breakpoint explícito para tablet, o inspetor deixa de ser empilhado na base e passa a ter limites de tamanho. O preenchimento deve ficar no View responsável pela superfície. A documentação desaconselha substituir cores internas, bordas e tipografia por meio de mecanismos de escape não seguros. Consulte a especificação de apoio ## Sistema de design Adobe Spectrum: deixe o tema controlar as cores e a tipografia nativas ### Separe a paleta de demonstração da exportação de tokens A pré-visualização tem um fundo cinza discreto, controles neutros e ilustrações coloridas originais. As cores dessas ilustrações não são valores de tokens certificados do Spectrum. No exemplo nativo, os componentes compatíveis obtêm sua aparência de defaultTheme. Uma superfície nativa personalizada deve usar os valores documentados de backgroundColor, em vez de presumir que um único hexadecimal obtido por amostragem funcione nos dois esquemas. Heading fornece estrutura semântica e também uma apresentação Spectrum adequada ao contexto. O título da página usa level={1}; Text apresenta conteúdo comum, como a contagem de itens selecionados. A pré-visualização personalizada HTML usa uma família tipográfica de sistema escolhida pela aplicação como alternativa e tamanhos de fonte definidos por ela. É uma demonstração do fluxo de trabalho e da hierarquia relativa, não uma afirmação de que a fonte ao redor OpenDesign ou a tipografia das ilustrações siga as especificações de fonte do Spectrum. Consulte a especificação de apoio ## Sistema de design Adobe Spectrum: uma tabela de coleção tem chaves, colunas e semântica de seleção ### A seleção é um contrato de dados A tabela é composta por TableHeader e Column, além de TableBody, Row e Cell. Cada ativo tem um id estável. selectedKeys e onSelectionChange tornam a seleção controlada, permitindo que o inspetor de exportação derive a contagem do mesmo estado. O usuário pode renomear um ativo sem alterar sua identidade. Usar a posição da linha como identidade tornaria a seleção frágil após a reordenação. A seleção pode ser o valor sentinela all. A configuração resolve esse valor para todos os ativos atuais antes de criar uma receita. Um Set vazio continua válido, pois a seleção em lote é opcional; disallowEmptySelection não é ativado intencionalmente. Em uma aplicação remota ou paginada, defina o significado de all para essa fonte de dados, em vez de presumir que as linhas renderizadas atualmente correspondem à coleção completa. - Identidade do ativo: chave estável usada pela coleção. - Inspeção: qual ilustração aparece ampliada no exemplo independente. - Seleção em lote: quais chaves aparecem na receita preparada. Consulte a especificação de apoio ## Sistema de design Adobe Spectrum: Picker e Button completam o inspetor de exportação ### O formato é controlado independentemente do lote Picker usa um rótulo visível e chaves Item estáveis. selectedKey recebe png ou jpeg; onSelectionChange fornece a chave selecionada. Isso é diferente de ler event.target.value de um select nativo. O formato continua selecionado quando o lote é limpo, permitindo que a pessoa revisora ajuste a seleção sem recriar uma predefinição. Button usa onPress para ativação e isDisabled quando nenhum ativo está selecionado. O exemplo nativo serializa os IDs e o formato em uma receita local. Ele não transforma dados de imagem, gera um arquivo de exportação real nem se conecta a um serviço de ativos. Esse é um limite de implementação útil: a ação e suas entradas são concretas, embora o mecanismo de conversão esteja fora do sistema de design. Consulte a especificação de apoio ## Sistema de design Adobe Spectrum Adapte a composição em vez de comprimir a arte ### Especifique o contrato dos pontos de quebra Este exemplo declara tablet:640 e desktop:1024. Essa escolha é explícita porque a página Provider apresenta atualmente padrões inconsistentes entre o texto explicativo e os metadados API gerados. Os valores responsivos se referem exatamente a essas chaves. O inspetor ocupa toda a largura no ponto de quebra base e, depois, fica ao lado da tabela flexível. A aplicação é responsável por esses pontos de quebra; eles não constituem um novo padrão universal do Spectrum. A ilustração independente usa uma tela grande com um inspetor lateral e uma faixa de miniaturas. Em telas pequenas, o inspetor passa para o fluxo normal, e a arte mantém sua proporção. Informações como dimensões e formato ficam fora da arte, permanecem legíveis e não alteram a imagem inspecionada. Consulte a especificação de apoio ## Sistema de design Adobe Spectrum Inspecionar, selecionar e preparar são ações diferentes ### Torne a demonstração testável Ao clicar em uma miniatura, a ilustração em destaque e seus metadados descritivos são alterados. Uma caixa de seleção altera o lote de exportação. Manter essas ações independentes permite inspecionar um recurso não selecionado sem exportá-lo por engano. A prévia informa a quantidade de itens selecionados e mantém o formato enquanto a pessoa revisora altera o lote. O TableView nativo fornece a interação com a coleção; o exemplo HTML usa botões e caixas de seleção comuns e não pretende reproduzir todo o modelo de navegação por teclado da grade. Ambos oferecem um caminho de teclado para as ações demonstradas. O resultado da preparação é texto, não apenas um efeito visual temporário, para que a pessoa revisora possa conferir exatamente quais ids e formato foram preparados. Consulte a especificação de apoio ## Sistema de design Adobe Spectrum Integre o componente nativo antes de ampliar a ferramenta ### Conecte um serviço de exportação real em um limite explícito Instale a versão v3 do conjunto em um app React existente e use a entrada completa abaixo. O exemplo inclui o provider, as importações, os dados da coleção, o estado de seleção, o estado do formato e o estado do resultado. Em uma integração de produção, a preparação da receita seria substituída por uma solicitação de exportação, e o resultado confirmado seria exibido para cada recurso. Não altere o nome da resposta local para Exportação concluída antes que esse serviço exista. Ao migrar para o Spectrum 2, use os mapeamentos da Adobe para dimensões, pontos de quebra e alterações nos componentes. Verifique novamente o comportamento de seleção e a persistência do formato; uma tabela visualmente semelhante ainda pode ter um contrato diferente. Deixe explícita a geração de origem para que futuras pessoas contribuidoras não combinem um Provider v3 com exemplos incompatíveis. 1. Selecione um recurso e confirme que seu id aparece na receita local. 2. Selecione tudo, altere PNG para JPEG e confira o conjunto completo de itens selecionados. 3. Limpe a seleção e confirme que a ação fica desativada enquanto o formato permanece selecionado. 4. Reduza a largura da janela de visualização e confirme que inspeção, seleção e saída da receita continuam acessíveis. Consulte a especificação de apoio ## Adobe Spectrum Exemplos de componentes do sistema de design ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação original HTML/CSS do fluxo documentado de coleção e inspeção v3. Paleta e arte são ilustrativas; não há runtime nativo do Spectrum nem conversão de imagens. ``` Spectrum asset inspector study
Campaign library / Autumn collection
Campaign master1600 × 1200

Original artwork · illustrative preview

``` Referência de código - A arte é um conteúdo de exemplo original. Preparar uma receita gera metadados de seleção, não arquivos de imagem convertidos; este documento não carrega o Spectrum v3 nem o Spectrum 2. ### Entrada da implementação nativa completa A implementação completa, desde a configuração, reunida aqui com as explicações específicas de API. Siga os pré-requisitos documentados de pacote e compilação na configuração. ``` // Terminal: npm install @adobe/react-spectrum@3 // Existing React app with
; entry: src/main.jsx import * as React from 'react'; import {createRoot} from 'react-dom/client'; import {Provider, defaultTheme, Flex, View, Heading, Text, Button, TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item} from '@adobe/react-spectrum'; const assets = [ {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'}, {id: 'square', name: 'Social square', dimensions: '1080 × 1080'}, {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'} ]; function AssetReview() { const [keys, setKeys] = React.useState(new Set(['hero'])); const [format, setFormat] = React.useState('png'); const [recipe, setRecipe] = React.useState(''); const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id)); return Campaign exports AssetDimensions {asset => {asset.name}{asset.dimensions} } PNGJPEG {selected.length} assets selected

{recipe ? 'Local recipe prepared. No image files were converted.' : ''}

{recipe && 
{recipe}
} ; } createRoot(document.getElementById('root')).render(); ``` Referência de código - Exemplo completo de coleção e inspetor v3 para um app React existente. Ele cria uma receita de exportação no estado local, não arquivos de imagem. Mantenha a versão resolvida do pacote no arquivo de lock e não combine esta entrada com importações do Spectrum 2. ### A seleção pode ser tudo, não apenas um Set Normalize o contrato da coleção antes de calcular o lote ou habilitar a ação. Este trecho usa os assets e as chaves da configuração completa. ``` const selected = keys === 'all' ? assets : assets.filter(asset => keys.has(asset.id)); ``` Referência de código - Os ids estáveis permanecem válidos após a ordenação e a renomeação. - Um lote vazio desativa apenas a ação de preparar a receita; ele não apaga o formato atual. ### Inspetor responsivo com nomes explícitos de pontos de quebra Use as mesmas chaves no Provider e nas propriedades responsivas. Os números são uma configuração deliberada da aplicação. ``` Asset table Export inspector ``` Referência de código - O texto de referência do Provider e a tabela de padrões gerada divergem sobre os pontos de quebra padrão; um mapa explícito elimina a ambiguidade. - marginStart e marginEnd, que são propriedades de margem lógica, se adaptam melhor do que as margens físicas esquerda e direita. ## Adobe Spectrum Configuração do agente de IA do sistema de design ### Ponto de partida para implementação Exemplo completo de coleção e inspetor v3 para um app React existente. Ele cria uma receita de exportação no estado local, não arquivos de imagem. Mantenha a versão resolvida do pacote no arquivo de lock e não combine esta entrada com importações do Spectrum 2. ``` // Terminal: npm install @adobe/react-spectrum@3 // Existing React app with
; entry: src/main.jsx import * as React from 'react'; import {createRoot} from 'react-dom/client'; import {Provider, defaultTheme, Flex, View, Heading, Text, Button, TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item} from '@adobe/react-spectrum'; const assets = [ {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'}, {id: 'square', name: 'Social square', dimensions: '1080 × 1080'}, {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'} ]; function AssetReview() { const [keys, setKeys] = React.useState(new Set(['hero'])); const [format, setFormat] = React.useState('png'); const [recipe, setRecipe] = React.useState(''); const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id)); return Campaign exports AssetDimensions {asset => {asset.name}{asset.dimensions} } PNGJPEG {selected.length} assets selected

{recipe ? 'Local recipe prepared. No image files were converted.' : ''}

{recipe && 
{recipe}
} ; } createRoot(document.getElementById('root')).render(); ``` ### Um prompt para seu projeto ``` Use @adobe/react-spectrum v3 com Provider e defaultTheme. Crie o TableView com chaves e o inspetor de exportação fornecidos usando Picker, Item, Flex, View e Button. Trate a seleção como um Set ou all, preserve o formato quando a seleção mudar e chame o resultado de receita local até conectar um serviço de conversão real. Use chaves explícitas para os pontos de quebra tablet/desktop e propriedades de estilo compatíveis. Mantenha separadas as APIs do v3 e do Spectrum 2. ``` ## Adobe Spectrum Fontes e escopo do sistema de design OpenDesign Estudo de implementação baseado na documentação mantida do React Spectrum v3, usando @adobe/react-spectrum. O Spectrum 2 também está disponível e tem APIs diferentes; esta página não apresenta o v3 como a implementação mais recente. A prévia independente do painel de recursos é uma interpretação original HTML/CSS, com arte ilustrativa e cores escolhidas pela aplicação, não um componente nativo do Spectrum nem um editor de imagens com gerenciamento de cores. - Provider Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui. - estilização Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui. - tematização Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui. - TableView Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui. - Picker Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui. - Heading Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui. - Button Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui. - migração Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui. ## Adobe Spectrum Recursos relacionados ao sistema de design ### Alaska Airlines Auro Explore o tema Alaska da Auro com tokens reais de cores semânticas e tipografia, tipografia baseada em classes e o componente nativo de voo. Dois registros originais de voos demonstram filtragem e seleção locais, sem representar inventário ou reservas de companhias aéreas. ### Arco Design Crie um seletor de seções de relatório com o componente Transfer controlado da Arco. Explore as escalas reais de espaçamento e tamanho, as convenções de variáveis de CSS, as superfícies semânticas e a diferença entre selecionar linhas e movê-las. ### Atlassian sistema de design Crie um quadro de planejamento de tarefas com tokens semânticos da Atlassian, uma escala de espaçamento de oito pixels, APIs reais de Button, Lozenge e Toggle, além da configuração necessária de estilos Compiled. Inspecione uma tarefa, filtre o quadro e mova um item de trabalho local sem confundir seleção com status. - [Referência de implementação](https://react-spectrum.adobe.com/v3/TableView.html) - [Fonte](https://react-spectrum.adobe.com/v3/Provider.html) - [Fonte](https://react-spectrum.adobe.com/migrating) - [Fonte](https://react-spectrum.adobe.com/v3/styling.html) - [Fonte](https://react-spectrum.adobe.com/v3/TableView.html) - [Fonte](https://react-spectrum.adobe.com/v3/Picker.html) - [Consulte a especificação de apoio](https://react-spectrum.adobe.com/migrating) - [Consulte a especificação de apoio](https://react-spectrum.adobe.com/v3/theming.html) - [Consulte a especificação de apoio](https://react-spectrum.adobe.com/v3/styling.html) - [Consulte a especificação de apoio](https://react-spectrum.adobe.com/v3/Heading.html) - [Consulte a especificação de apoio](https://react-spectrum.adobe.com/v3/TableView.html) - [Consulte a especificação de apoio](https://react-spectrum.adobe.com/v3/Picker.html) - [Consulte a especificação de apoio](https://react-spectrum.adobe.com/v3/Provider.html) - [Referência de código](https://react-spectrum.adobe.com/v3/TableView.html) - [Referência de código](https://react-spectrum.adobe.com/v3/Provider.html) - [Provider Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui.](https://react-spectrum.adobe.com/v3/Provider.html) - [estilização Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui.](https://react-spectrum.adobe.com/v3/styling.html) - [tematização Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui.](https://react-spectrum.adobe.com/v3/theming.html) - [TableView Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui.](https://react-spectrum.adobe.com/v3/TableView.html) - [Picker Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui.](https://react-spectrum.adobe.com/v3/Picker.html) - [Heading Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui.](https://react-spectrum.adobe.com/v3/Heading.html) - [Button Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui.](https://react-spectrum.adobe.com/v3/Button.html) - [migração Referência oficial do Spectrum React para a implementação e as limitações discutidas aqui.](https://react-spectrum.adobe.com/migrating)