# Sistema de design Esri Calcite ## Sistema de design Esri Calcite Prévia da interface Selecione um local na lista ou no esquema, filtre os estados de revisão e valide uma nota que permanece associada a cada local até a página ser recarregada. ## Sistema de design Esri Calcite Referência de design Tokens de design do Calcite 4.1.0 e API do componente atual, verificados junto a Components 5.1.2. Os pacotes de tokens e de componentes têm números de versão separados. O exemplo incorporado é uma interpretação original de HTML/CSS; ele não redistribui o ambiente de execução do Calcite nem afirma reproduzir o comportamento nativo. ### Superfícies, texto e interação do tema claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --calcite-color-surface-1 | #f7f7f7 | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-surface-2 | #ffffff | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-surface-3 | #f2f2f2 | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-surface-4 | #ebebeb | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-surface-highlight | #d6efff | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-text-1 | #141414 | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-text-2 | #4a4a4a | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-text-3 | #6b6b6b | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-text-inverse | #ffffff | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-text-link | #00619b | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-border-1 | #d4d4d4 | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-border-2 | #dedede | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-border-3 | #ebebeb | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-border-input | #949494 | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-brand | #007ac2 | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-brand-hover | #00619b | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | | --calcite-color-brand-press | #004874 | Referência semântica para a função indicada pelo token; a seleção e as bordas dos campos precisam de contrastes diferentes. | ### Escala de espaçamento atual | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --calcite-space-none | 0 | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-px | 1px | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-base | 2px | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-2xs | 0.25rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-xs | 0.375rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-sm | 0.5rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-sm-plus | 0.625rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-md | 0.75rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-md-plus | 0.875rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-lg | 1rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-xl | 1.25rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-2xl | 1.5rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-3xl | 2rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | | --calcite-space-4xl | 2.75rem | Família atual de tokens de espaçamento. Os intervalos em rem seguem o tamanho da raiz; evite misturá-los com aliases de espaçamento obsoletos. | ### Escalas tipográfica e de cantos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --calcite-corner-radius-none | 0 | Valores publicados, não medidas inferidas de uma captura de tela. | | --calcite-corner-radius-xs | 2px | Valores publicados, não medidas inferidas de uma captura de tela. | | --calcite-corner-radius-sm | 4px | Valores publicados, não medidas inferidas de uma captura de tela. | | --calcite-corner-radius-pill | 9999px | Valores publicados, não medidas inferidas de uma captura de tela. | | --calcite-font-size-xs | 10px | Valores publicados, não medidas inferidas de uma captura de tela. | | --calcite-font-size-sm | 12px | Valores publicados, não medidas inferidas de uma captura de tela. | | --calcite-font-size | 14px | Valores publicados, não medidas inferidas de uma captura de tela. | | --calcite-font-size-md | 16px | Valores publicados, não medidas inferidas de uma captura de tela. | | --calcite-font-size-lg | 18px | Valores publicados, não medidas inferidas de uma captura de tela. | | --calcite-font-size-xl | 20px | Valores publicados, não medidas inferidas de uma captura de tela. | | --calcite-font-size-2xl | 24px | Valores publicados, não medidas inferidas de uma captura de tela. | ### Componente de entrada API | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | scale | s / m / l; default m | Altere a escala do componente de propósito; isso não é o mesmo que alterar o zoom da página. | | status | idle / valid / invalid | Comunique a validade do campo com uma mensagem, não apenas com uma cor. | | labelText | string | Texto do rótulo visível da entrada atual API. | | validationMessage | string | Explique a entrada inválida ao lado do controle. | | calciteInputInput | event | Leia event.target.value enquanto a pessoa digita. | | setFocus() | Promise | Mova o foco para o componente nativo após um erro de validação da aplicação. | ## Esri Calcite 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. ## Esri Calcite Arquitetura de espaços de trabalho e painéis do sistema de design ### Mantenha visível o contexto do objeto > Uma tarefa espacial geralmente tem pelo menos dois contextos: a área que está sendo inspecionada e o objeto selecionado. O exemplo mantém uma pequena lista de locais ao lado de um esquema original e de um inspetor. Selecionar uma linha da lista ou um marcador define o mesmo ID estável do local, para que o nome, o status e a observação não acabem se referindo a objetos diferentes. ### Separe a ilustração de um mapa real O SVG comunica a relação entre uma lista e uma superfície espacial. Ele não tem projeção, coordenadas, camadas, zoom, geocodificação nem roteamento. A legenda visível informa que se trata de um esquema e que não está em escala. Uma visualização de ArcGIS para produção requer integração própria com o SDK, dados e trabalho de acessibilidade; um shell Calcite, por si só, não oferece esses recursos. ## Esri Calcite Papéis semânticos de cor do sistema de design ### Use superfícies para dividir as ferramentas sem recorrer a cartões pesados A referência diferencia surface-1 a surface-4 e reserva surface-highlight para dar ênfase. O exemplo usa um inspetor branco sobre um fundo esbranquiçado discreto e uma linha selecionada em azul-claro. Bordas neutras e finas delimitam os painéis sem criar um cartão flutuante em torno de cada campo. ### Atribua um significado consistente de interação ao azul As cores de marca, hover e pressionamento formam uma sequência progressivamente mais escura, de #007ac2 a #00619b e #004874. O marcador selecionado e a ação principal de salvar usam essa família de cores para diferentes papéis de interação. Os estados de revisão escritos e a mensagem de validação da observação continuam legíveis sem depender apenas da cor. ## Esri Calcite Tipografia e densidade de informações do sistema de design ### Preserve a hierarquia de informações compacta As referências absolutas de tipografia publicadas incluem 12px para texto pequeno, 14px para texto-base, 16px para texto médio e 20px para texto extragrande. O exemplo combina um título de espaço de trabalho de 20px com títulos de painel de 16px e controles de 14px. Os metadados são menores, mas nunca são o único elemento que identifica o objeto selecionado. ### Diferencie uma fonte alternativa da fonte de marca Este exemplo independente usa Arial e fontes alternativas do sistema. Ele não inclui fontes da marca Esri nem apresenta essa alternativa como Avenir. Uma integração nativa autorizada deve seguir os recursos e a configuração de tema da versão fixada do Calcite. Alterar a fonte pode afetar as quebras de linha e a largura dos controles; por isso, teste o conjunto de recursos realmente implantado. ## Esri Calcite Tokens de espaçamento e painéis responsivos do sistema de design ### Escolha os nomes atuais dos tokens A referência usa a escala atual --calcite-space-*, que combina valores em pixels para os menores intervalos e valores em rem para espaçamentos maiores. Use essas funções nomeadas de forma consistente ao implementar um tema nativo. O layout da aplicação neste exemplo usa valores explícitos CSS para que a demonstração possa ser executada sem importar pacotes restritos. ### Reorganize o inspetor antes de comprimir o campo No ponto de quebra original da aplicação, o inspetor passa para baixo da lista e da ilustração. Em um celular estreito, as três regiões formam uma sequência vertical. A área de texto continua ocupando toda a largura, com o rótulo, o texto de ajuda e a ação de salvar. Esses pontos de quebra são escolhas de layout definidas para a aplicação, não valores atribuídos a tokens do Calcite. ## Esri Calcite Comportamento de seleção e filtragem do sistema de design ### Use um único identificador de seleção A lista e o esquema compartilham a seleção pelos identificadores A-01, B-02 e C-03, não pela posição atual no array. Ao filtrar por Checked, o local correspondente disponível é selecionado e o inspetor acompanha a seleção. O estado de pressionado é exposto tanto no botão da lista quanto no marcador correspondente. ### Mantenha as observações salvas separadas dos rascunhos não salvos Uma observação salva é armazenada em um Map indexado pelo ID do local. Ao voltar a esse local, ela é restaurada; ao mudar de local sem salvar, o texto não salvo é substituído. O texto de ajuda informa explicitamente que os dados ficam apenas na sessão local. Um editor de produção deve proteger alterações não salvas quando a perda de um rascunho puder ter consequências relevantes. ## Esri Calcite Validação e recuperação da entrada no sistema de design ### Use a entrada nativa real API ao adotar o Calcite O exemplo nativo usa labelText, value, status e validationMessage. O evento calciteInputInput pode limpar um erro desatualizado, enquanto setFocus() devolve o foco ao componente após a falha de uma regra da aplicação. Esses são nomes públicos API, ao contrário de acessar o shadow root para encontrar uma entrada interna. ### Não confunda uma confirmação local com a persistência em um serviço A prévia independente exige pelo menos dez caracteres após remover os espaços das extremidades e limita o campo a 240. A confirmação identifica o local e informa explicitamente que a ação ocorreu localmente. Ao recarregar a página, as observações são apagadas. Uma versão conectada à rede precisaria lidar com estados pendentes, falhas, novas tentativas e conflitos; a mensagem de salvamento local não implica nenhum desses comportamentos. 1. Tente salvar uma observação vazia ou curta e leia o erro. 2. Digite uma observação mais longa, salve, selecione outro local e depois volte. 3. Recarregue a página para confirmar que o exemplo não promete persistência. ## Esri Calcite Alternativas espaciais acessíveis no sistema de design ### Ofereça uma opção em lista para cada marcador Cada marcador acionável tem um botão de texto na lista de locais. Assim, o mapa ilustrado não é a única maneira de selecionar um objeto. O SVG recebe uma descrição concisa, enquanto os controles têm seus próprios nomes e contornos de foco visíveis. Um mapa real exige mais do que copiar o texto alternativo do esquema. ### Posicione a validação junto ao campo A área de texto referencia tanto o texto de ajuda quanto o erro por meio de aria-describedby. Em caso de falha, recebe aria-invalid e o foco; ao editar, o estado inválido desatualizado é removido. A confirmação usa uma região de status. Pessoas que usam o teclado podem selecionar um local, escrever uma observação e salvá-la sem interagir com uma forma geográfica desenhada. ## Esri Calcite Limites de versão e integração do sistema de design ### Fixe as versões dos pacotes e confira os requisitos de licenciamento Components 5.1.2 e design tokens 4.1.0 são pacotes distintos. A página de licenciamento atual descreve a disponibilidade para contas do ArcGIS Online, Enterprise ou Location Platform. Não presuma que uma versão de código aberto antiga se aplica ao pacote atual. O código-fonte nativo abaixo é para um projeto que atende a esses requisitos. - Components: 5.1.2. - Referência de design tokens: 4.1.0. - Prévia: HTML, CSS e JavaScript independentes; sem runtime da Esri. ### Registre somente os componentes que você usa O exemplo mínimo de módulo importa os pontos de entrada dos componentes de entrada e botão e, em seguida, usa suas propriedades e eventos públicos. O exemplo completo e independente de HTML pode ser executado sozinho; o trecho nativo é uma alternativa para um projeto Vite com o pacote fixado instalado. Ele foi verificado em relação ao API público, não foi apresentado como o runtime compilado por trás do esquema. ## Exemplos de componentes do sistema de design Esri Calcite ### Exemplo independente para inspeção do site HTML, CSS e JavaScript completos e independentes, usados nesta prévia. Salve como index.html e abra em um navegador. ``` Site inspection panel

Field inspection workspace

Original Calcite-inspired layout study · fictional site data

Local notes only
Schematic illustration · not to scale
``` Referência de código - Esquema original e comportamento da aplicação. Não inclui SDK de mapas, dados remotos nem runtime da Esri. ### Alternativa nativa com Calcite Input Substitua src/main.js em um projeto Vite vanilla cujo index.html contenha
. ``` import "@esri/calcite-components/components/calcite-input"; import "@esri/calcite-components/components/calcite-button"; document.querySelector("#app").innerHTML = ` Validate note

`; const field = document.querySelector("#inspection-note"); const result = document.querySelector("#result"); field.addEventListener("calciteInputInput", () => { field.status = "idle"; result.textContent = ""; }); document.querySelector("#save-note").addEventListener("click", async () => { if (field.value.trim().length < 10) { field.status = "invalid"; await field.setFocus(); return; } field.status = "valid"; result.textContent = "The note passes the local rule. Nothing was sent."; }); ``` Referência de código - Instale @esri/calcite-components@5.1.2 após revisar os requisitos de licenciamento atuais. Esta alternativa foi verificada com API; a prévia independente acima é o exemplo testado no navegador. ## Configuração do agente de sistema de design Esri Calcite ### Ponto de partida para implementação O pacote de componentes nativos exige uma conta ArcGIS elegível de acordo com os termos de licenciamento atuais. Ao hospedar os recursos dos componentes por conta própria, confira os requisitos de caminho dos arquivos de recursos. ``` # Independent specimen: save the complete HTML example as index.html. # Native alternative for an appropriately licensed project: npm create vite@latest calcite-note -- --template vanilla cd calcite-note npm install npm install @esri/calcite-components@5.1.2 # Replace src/main.js with the native input example. npm run dev ``` ### Um prompt para seu projeto ``` Crie um espaço de trabalho focado na inspeção espacial com base nas referências do Calcite. Mantenha o ID do objeto selecionado igual na lista e no painel de inspeção, mostre os estados por escrito e diferencie as anotações locais da persistência no serviço. Use a interpretação independente como ponto de partida ou escolha deliberadamente o caminho de componentes nativos licenciados. Não descreva o esquema original como um mapa do ArcGIS. ``` ## Fontes e escopo do sistema de design Esri Calcite Guia da aplicação OpenDesign. O exemplo ilustrado foi implementado de forma independente e usa dados fictícios. O uso atual do Calcite é regido pelo licenciamento da Esri e exige uma conta ArcGIS elegível; o exemplo de integração nativa é uma alternativa para projetos devidamente licenciados, não o runtime desta prévia. - API do Calcite Input Propriedades de campos, eventos e método de foco. - Introdução ao Calcite Registro de componentes e configuração de recursos. - Licenciamento atual Requisitos de conta ArcGIS e uso. - Design tokens publicados Referências fixadas de tipografia, espaçamento e raio. ## Recursos relacionados ao sistema de design Esri Calcite ### GitLab Pajamas Um guia Pajamas para fluxos de trabalho técnicos: tokens semânticos reais, tipografia e espaçamento fluidos, um inspetor de pipeline em etapas, saída de falhas legível e uma simulação de nova tentativa explicitamente local. ### HPE Grommet Modele uma reserva de capacidade com os primitivos de layout do Grommet, campos de formulário controlados e medidores numéricos. Use deliberadamente a escala do tema e mantenha o tema base do Grommet separado do tema HPE instalado à parte. ### Infor sistema de design Monte um formulário empresarial de manutenção com estados reais de entrada do IDS, aliases de tema e um identificador de recurso exato. Consulte os tokens do tema público atual, um pacote Web Components fixado em uma versão específica e um fluxo local de rascunho com validação e redefinição. - [Referência de implementação](https://developers.arcgis.com/calcite-design-system/) - [Fonte](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css) - [Fonte](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css) - [Fonte](https://developers.arcgis.com/calcite-design-system/components/input/) - [Referência de código](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css) - [Referência de código](https://developers.arcgis.com/calcite-design-system/components/input/) - [API do Calcite Input Propriedades de campos, eventos e método de foco.](https://developers.arcgis.com/calcite-design-system/components/input/) - [Introdução ao Calcite Registro de componentes e configuração de recursos.](https://developers.arcgis.com/calcite-design-system/get-started/) - [Licenciamento atual Requisitos de conta ArcGIS e uso.](https://developers.arcgis.com/calcite-design-system/resources/licensing/) - [Design tokens publicados Referências fixadas de tipografia, espaçamento e raio.](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css)