# Sistema de design ServiceTitan Anvil ## Prévia da interface do sistema de design ServiceTitan Anvil Alterne entre os modos claro e escuro, selecione a equipe disponível e revise um plano local sincronizado. ## Referência de design do sistema de design ServiceTitan Anvil Exportações do tema principal de @servicetitan/hammer-token 3.5.0, com a documentação de temas do Anvil2. ### Pares semânticos para os modos claro e escuro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | BackgroundColorDefault | light #ffffff / dark #1a1a1a | Superfície principal do aplicativo. | | BackgroundColorDefaultHover | light #f9f9f9 / dark #292929 | Superfície ao passar o cursor. | | BackgroundColorPrimary | light #0265dc / dark #70b1ff | Preenchimento da ação principal. | | BackgroundColorPrimaryHover | light #1d4ca3 / dark #9ecaff | Função nativa de estado de hover primário. | | BackgroundColorPrimaryFaint | light #fafcff / dark #000b19 | Superfície selecionada discreta. | | ForegroundColorSubdued | light #707070 / dark #c4c4c4 | Texto de apoio. | | ForegroundColorOnPrimary | light #ffffff / dark #1a1a1a | Texto combinado com preenchimento primário. | | ForegroundColorPrimary | light #0265dc / dark #70b1ff | Primeiro plano interativo. | | BorderColorSubdued | light #e6e6e6 / dark #404040 | Limites com pouca ênfase. | | BorderColorPrimary | light #0265dc / dark #9ecaff | Limite interativo. | | StatusColorInfo | light #0265dc / dark #70b1ff | Estado informativo. | | StatusColorDanger | light #d62100 / dark #ff5b3d | Atenção imediata. | | StatusColorSuccess | light #077e50 / dark #0bd085 | Revisão local concluída. | | StatusColorWarning | light #ffbe00 / dark #ffe278 | Alerta não crítico. | ### Geometria primitiva e valores responsivos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | BreakpointSm | 640px | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | BreakpointMd | 768px | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | BreakpointLg | 1024px | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | BreakpointXl | 1280px | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | BreakpointXxl | 1536px | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | DurationDefault | 200ms | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | DurationInstant | 0ms | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | DurationFast | 100ms | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | DurationSlow | 300ms | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | Radius0 | 0rem | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | Radius1 | 0.1875rem | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | Radius2 | 0.375rem | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | Radius3 | 0.5625rem | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | Radius4 | 0.75rem | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | Radius5 | 0.9375rem | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | Radius6 | 1.125rem | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | Radius7 | 1.3125rem | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | | Radius8 | 1.5rem | Primitivo publicado; as funções semânticas e os aliases de componentes determinam as funções efetivamente aplicadas. | ### Contrato de substituição do ThemeProvider | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | theme.semantic | semantic token overrides | Altere uma função, como BackgroundColorPrimary. | | theme.component | component token overrides | Restrinja uma alteração à função de um componente, como ButtonPrimaryBackgroundColor. | | value | default/light token value | Defina o valor para o modo claro. | | extensions.appearance.dark.value | dark appearance value | Especifique o valor correspondente para o modo escuro. | | CSS output | --a2- | O ThemeProvider serializa a chave do token em uma variável CSS. | | Primitive cascade | resolved at build time | Substituir um primitivo em tempo de execução não recalcula os aliases semânticos. | ## Guia completo do sistema de design ServiceTitan Anvil 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. ## Arquitetura de tokens em três camadas do sistema de design ServiceTitan Anvil ### Mantenha os primitivos abaixo das funções semânticas > O Anvil2 separa primitivos brutos, funções semânticas e aliases específicos de componentes. Em geral, um produto deve escolher a função que descreve o significado na interface, em vez de copiar um azul primitivo para cada controle. A tabela de referência inclui os valores exportados exatos e seus equivalentes para o modo escuro, permitindo revisar a mudança de tema como um par. ### Não espere que os aliases sejam recalculados em tempo de execução O guia oficial de temas informa que as referências a primitivos são resolvidas durante a compilação. Alterar um primitivo por meio de um provedor em tempo de execução não regenera automaticamente a camada semântica. Para mudar as cores do aplicativo, substitua a função semântica relevante; para alterar um componente, use a camada de componentes. Isso evita um tema parcialmente alterado, que deixaria controles relacionados inconsistentes. ## Modo de aparência claro e escuro do sistema de design ServiceTitan Anvil ### Altere em conjunto o primeiro plano e o plano de fundo A ação primária usa BackgroundColorPrimary com ForegroundColorOnPrimary. No modo claro, essa combinação usa azul com texto branco; no modo escuro, usa um azul mais claro com um rótulo escuro. Alterar apenas o preenchimento criaria um par incoerente. O estudo completo de HTML usa light-dark() com um seletor color-scheme para demonstrar esses valores, sem afirmar que é o ThemeProvider. ### Use cores de estado com significados descritos O Anvil2 associa significados de estado a famílias de cores. A revisão local usa uma função de sucesso, mas ainda informa exatamente o que aconteceu. O técnico indisponível é identificado por texto e tem a opção de rádio desabilitada. Nenhuma tonalidade verde sugere que uma visita de serviço foi despachada; o exemplo nunca se conecta a um backend de despacho. ## Atribuição de serviço e estados no sistema de design ServiceTitan Anvil ### Faça com que a disponibilidade determine a próxima escolha Ao selecionar um técnico, as opções de horário são substituídas pela disponibilidade fictícia dessa pessoa. A pessoa indisponível continua visível, mas não pode ser selecionada. Como há uma dependência entre dois controles, alterar o primeiro deve redefinir o segundo para um valor válido, em vez de manter um horário que não corresponde à disponibilidade da pessoa escolhida. ### Separe o planejamento da execução A revisão da atribuição registra um plano local e informa explicitamente que nenhuma visita foi despachada. Um fluxo de produção exigiria verificações de permissão, uma resposta de agenda atualizada e tratamento de conflitos antes da confirmação. O exemplo mantém esse limite visível e, ainda assim, oferece uma interação completa que pode ser testada e adaptada. ## Densidade operacional e legibilidade no sistema de design ServiceTitan Anvil ### Mantenha o contexto do trabalho próximo da seleção Um resumo compacto do trabalho apresenta a tarefa, a duração, a área e a prioridade. As opções de técnico formam uma lista vertical legível, e a visita proposta aparece em um painel separado. A interface usa limites neutros e cores de destaque moderadas para que a seleção e a ação principal continuem fáceis de identificar. As barras da agenda estão identificadas como ilustrativas; o seletor de horário é a fonte oficial. ### Preserve a ordem de leitura em dispositivos móveis Abaixo de 768px, a visita proposta aparece depois do trabalho e da lista de técnicos. Os controles mantêm um tamanho adequado e os rótulos quebram linhas naturalmente. A prévia não usa painéis com altura de janela de visualização fixa, evitando criar grandes áreas vazias abaixo de conteúdos curtos. A ordem em uma única coluna segue a mesma sequência de decisão do layout mais amplo. ## Integração nativa e alternativa completa de HTML para o sistema de design ServiceTitan Anvil ### Use a estrutura documentada do provedor O ThemeProvider do Anvil2 aceita substituições de tokens semânticos e de componentes, com extensões para valores e aparência escura. O guia inclui abaixo um exemplo completo do provedor, com fonte na documentação pública. Trata-se de uma referência de integração nativa, distinta do exemplo independente de HTML executado localmente. ### Evite alegar um runtime de pacote não verificado Esta página apresenta uma implementação funcional em HTML e dados de tokens verificados. O exemplo do provedor nativo é uma referência de integração separada, não o runtime exibido na prévia. Ao adotar componentes React, instale uma versão compatível do Anvil2, inclua os estilos necessários e verifique as APIs dos componentes antes de substituir os controles nativos de HTML. ## Acessibilidade e verificação de estados no sistema de design ServiceTitan Anvil ### Use a semântica nativa dos formulários Os técnicos são apresentados como opções de rádio nativas com rótulos, o horário de início é um seletor identificado por rótulo e o controle de aparência expõe aria-pressed. A mensagem de revisão é uma região de status. O modelo nativo de teclado do navegador gerencia a seleção das opções de rádio; o estilo de foco visível é independente dos estilos de seleção ou de hover. ### Verifique as alterações após a confirmação Alterar o técnico ou o horário limpa as mensagens de revisão anteriores. Alternar a aparência mantém o técnico e o horário selecionados, pois uma mudança visual de tema não deve apagar um plano. Os testes devem abranger as duas transições, além da seleção desabilitada e do excesso de conteúdo em telas estreitas, em vez de apenas verificar se é possível clicar em um botão. ## Transferência para agente de IA e implementação do sistema de design ServiceTitan Anvil ### Comece pelo modelo completo de estados Salve e execute o exemplo completo em HTML para inspecionar o comportamento. Os pares claro/escuro derivados dos tokens aparecem na parte superior do CSS, e os dados de disponibilidade definidos no exemplo estão no script. Uma implementação nativa de React pode manter as mesmas transições de estado e substituir os controles do Anvil2 após verificar sua compatibilidade. 1. Execute o exemplo completo de HTML. 2. Selecione o segundo técnico e confirme que as opções de horário de início mudam. 3. Revise o plano, depois altere o horário e confirme que as mensagens são removidas. 4. Alterne a aparência e confirme que a seleção atual é mantida. ### Especifique o que exige dados reais Peça ao agente de IA que mantenha a lista de horários dependente do técnico, o membro da equipe indisponível desabilitado, a invalidação da revisão e o comportamento da aparência. Substitua o trabalho e a equipe fictícios somente quando houver um contrato de dados real. Não transforme a revisão local em uma alegação de sucesso apenas mudando o rótulo do botão. - Verifique a disponibilidade antes de realizar um despacho. - Mantenha separadas as substituições semânticas e as de componentes. - Teste os pares de primeiro plano e plano de fundo nos modos claro e escuro. ## Exemplos de componentes do sistema de design ServiceTitan Anvil ### Exemplo completo de atribuição local Original em HTML/CSS/JavaScript, com aparências derivadas de tokens e estado de formulário dependente. ``` Dispatch assignment study
SERVICE OPERATIONS / LOCAL PLANNING STUDY

Assign a service visit

Match a sample job with an available technician.

Job and technician

Sample job #204 · Heating inspection90 minutes · North district · Routine priority
``` Referência de código - Salve como index.html; navegadores modernos oferecem suporte a light-dark(). Este não é o runtime nativo do Anvil2. ### Referência de integração do ThemeProvider Estrutura documentada de substituição semântica em uma entrada completa de React. Valide-a com a versão instalada do Anvil2. ``` import React from 'react'; import { createRoot } from 'react-dom/client'; import { ThemeProvider } from '@servicetitan/anvil2'; const theme = { semantic: { BackgroundColorPrimary: { value: '#7c3aed', extensions: { appearance: { dark: { value: '#a78bfa' } } }, }, }, }; function App() { return (

Theme integration check

Primary role with the provider’s matching foreground role
); } createRoot(document.getElementById('root')).render(); ``` Referência de código - Esta referência do provedor foi conferida com a documentação oficial; o exemplo em execução acima é independente de HTML. ## Configuração do agente de IA para o sistema de design ServiceTitan Anvil ### Ponto de partida para implementação O exemplo executado não requer um pacote Anvil2. O exemplo separado do ThemeProvider exige uma instalação nativa compatível. ``` # Save the complete HTML example as index.html python3 -m http.server 8080 # Open http://localhost:8080 ``` ### Um prompt para seu projeto ``` Crie uma interface de atribuição de serviços usando funções semânticas do Anvil2. Mantenha os pares de primeiro plano para os modos claro e escuro, as opções de horário dependentes do técnico, a equipe indisponível desabilitada e a invalidação da revisão do exemplo completo. Escolha explicitamente entre o HTML original e uma instalação verificada de React do Anvil2. Nunca afirme que houve um despacho sem uma resposta do backend. ``` ## Fontes e escopo do sistema de design ServiceTitan Anvil Um guia de OpenDesign para o Anvil2 da ServiceTitan. Os valores dos tokens foram extraídos do Hammer 3.5.0 público. O exemplo em execução é HTML original, não um runtime de React do Anvil2; todos os técnicos e dados de disponibilidade são fictícios. - Tematização Camadas de tokens, substituições e valores de aparência. - Cores Funções de estado e orientações sobre cores de interação. - Espaçamento Escala de espaçamento e integração de utilitários. - Dimensões Fundamentos de dimensionamento. - Arquitetura da biblioteca Limites entre os pacotes e as bibliotecas do Anvil2. ## Recursos relacionados ao sistema de design ServiceTitan Anvil ### Siemens iX Inspecione eventos industriais com um vocabulário explícito de níveis de gravidade, funções de cor adaptadas ao tema e o iX Event List API. Este guia cria um caderno local de equipamentos sem confundir um registro revisado com um alarme de máquina resolvido. ### Sprout Social Seeds Inspecione as cores públicas, o espaçamento, a tipografia de produto e os tokens de borda reais do Seeds em uma fila completa de revisão editorial, com seleção múltipla, estados vazios após filtragem e opção de desfazer. ### SumUp Circuit Um guia do Circuit com tokens semânticos exatos, propriedades nativas de validação, um editor completo de itens para lojistas e uma prévia ilustrada do lado do cliente. - [Referência de implementação](https://anvil.servicetitan.com/docs/web/foundations/theming) - [Fonte](https://anvil.servicetitan.com/docs/web/foundations/theming) - [Fonte](https://anvil.servicetitan.com/docs/web/foundations/sizing) - [Referência de código](https://anvil.servicetitan.com/docs/web/foundations/theming) - [Tematização Camadas de tokens, substituições e valores de aparência.](https://anvil.servicetitan.com/docs/web/foundations/theming) - [Cores Funções de estado e orientações sobre cores de interação.](https://anvil.servicetitan.com/docs/web/foundations/colors) - [Espaçamento Escala de espaçamento e integração de utilitários.](https://anvil.servicetitan.com/docs/web/foundations/spacing) - [Dimensões Fundamentos de dimensionamento.](https://anvil.servicetitan.com/docs/web/foundations/sizing) - [Arquitetura da biblioteca Limites entre os pacotes e as bibliotecas do Anvil2.](https://anvil.servicetitan.com/docs/library-architecture)