# Sistema de design Salesforce Lightning ## Prévia da interface do sistema de design Salesforce Lightning Altere a prioridade ou o status, valide uma nota de atualização, salve um registro de atividade local e descarte um rascunho posterior sem alterar o registro salvo. ## Referência de design do sistema de design Salesforce Lightning CSS nativo publicado do @salesforce-ux/design-system 2.264.1 e exportação de tokens ui-force. Esta é uma referência fixada ao blueprint clássico, não uma alegação de compatibilidade com a linguagem de design mais recente do SLDS 2 nem com um ambiente de execução do Lightning Web Components. O repositório histórico upstream está arquivado. ### Superfícies de registro e texto semântico | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | COLOR_BACKGROUND | rgb(243, 243, 243) | Referência do pacote publicado. Preserve a função indicada para texto, superfície ou ação, em vez de aplicar a mesma cor de marca a tudo. | | COLOR_BACKGROUND_ALT | rgb(255, 255, 255) | Referência do pacote publicado. Preserve a função indicada para texto, superfície ou ação, em vez de aplicar a mesma cor de marca a tudo. | | COLOR_TEXT_DEFAULT | rgb(3, 45, 96) | Referência do pacote publicado. Preserve a função indicada para texto, superfície ou ação, em vez de aplicar a mesma cor de marca a tudo. | | COLOR_TEXT_WEAK | rgb(116, 116, 116) | Referência do pacote publicado. Preserve a função indicada para texto, superfície ou ação, em vez de aplicar a mesma cor de marca a tudo. | | COLOR_BORDER | rgb(201, 201, 201) | Referência do pacote publicado. Preserve a função indicada para texto, superfície ou ação, em vez de aplicar a mesma cor de marca a tudo. | | COLOR_BORDER_ERROR | rgb(234, 0, 30) | Referência do pacote publicado. Preserve a função indicada para texto, superfície ou ação, em vez de aplicar a mesma cor de marca a tudo. | | COLOR_BORDER_SELECTION | rgb(1, 118, 211) | Referência do pacote publicado. Preserve a função indicada para texto, superfície ou ação, em vez de aplicar a mesma cor de marca a tudo. | | COLOR_BACKGROUND_BUTTON_BRAND | rgb(1, 118, 211) | Referência do pacote publicado. Preserve a função indicada para texto, superfície ou ação, em vez de aplicar a mesma cor de marca a tudo. | | COLOR_BACKGROUND_BUTTON_BRAND_HOVER | rgb(1, 68, 134) | Referência do pacote publicado. Preserve a função indicada para texto, superfície ou ação, em vez de aplicar a mesma cor de marca a tudo. | | COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE | rgb(3, 45, 96) | Referência do pacote publicado. Preserve a função indicada para texto, superfície ou ação, em vez de aplicar a mesma cor de marca a tudo. | ### Escala clássica de espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | SPACING_X_SMALL | 0.5rem | Exportação clássica SPACING_*. Não é o conjunto VAR_SPACING_* compacto e separado. | | SPACING_XXX_SMALL | 0.125rem | Exportação clássica SPACING_*. Não é o conjunto VAR_SPACING_* compacto e separado. | | SPACING_XX_SMALL | 0.25rem | Exportação clássica SPACING_*. Não é o conjunto VAR_SPACING_* compacto e separado. | | SPACING_SMALL | 0.75rem | Exportação clássica SPACING_*. Não é o conjunto VAR_SPACING_* compacto e separado. | | SPACING_MEDIUM | 1rem | Exportação clássica SPACING_*. Não é o conjunto VAR_SPACING_* compacto e separado. | | SPACING_NONE | 0 | Exportação clássica SPACING_*. Não é o conjunto VAR_SPACING_* compacto e separado. | | SPACING_X_LARGE | 2rem | Exportação clássica SPACING_*. Não é o conjunto VAR_SPACING_* compacto e separado. | | SPACING_XX_LARGE | 3rem | Exportação clássica SPACING_*. Não é o conjunto VAR_SPACING_* compacto e separado. | | SPACING_LARGE | 1.5rem | Exportação clássica SPACING_*. Não é o conjunto VAR_SPACING_* compacto e separado. | ### Escala tipográfica | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | FONT_SIZE_1 | 0.625rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | | FONT_SIZE_2 | 0.75rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | | FONT_SIZE_3 | 0.8125rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | | FONT_SIZE_4 | 0.875rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | | FONT_SIZE_5 | 1rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | | FONT_SIZE_6 | 1.125rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | | FONT_SIZE_7 | 1.25rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | | FONT_SIZE_8 | 1.5rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | | FONT_SIZE_9 | 1.75rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | | FONT_SIZE_10 | 2rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | | FONT_SIZE_11 | 2.625rem | Escolha o tamanho do texto conforme a função, mantendo legíveis as notas do caso e os rótulos dos campos. | ### Raio dos cantos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | BORDER_RADIUS_SMALL | 0.125rem | Referência publicada de raio. Um marcador de status circular é diferente de um controle de formulário retangular. | | BORDER_RADIUS_MEDIUM | 0.25rem | Referência publicada de raio. Um marcador de status circular é diferente de um controle de formulário retangular. | | BORDER_RADIUS_LARGE | 0.5rem | Referência publicada de raio. Um marcador de status circular é diferente de um controle de formulário retangular. | | BORDER_RADIUS_CIRCLE | 50% | Referência publicada de raio. Um marcador de status circular é diferente de um controle de formulário retangular. | ### Estrutura do blueprint nativo de CSS | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | slds-page-header | Record context | Mantenha a identificação e o resumo do caso acima do formulário de edição. | | slds-card | Grouped content region | Os detalhes e a atividade do caso usam regiões semânticas distintas. | | slds-form-element | Label + control + help | Agrupe cada valor editável em um campo coerente. | | slds-has-error | Invalid field modifier | Defina ao lado de aria-invalid e de uma mensagem de erro específica. | | slds-button_brand | Primary action | Salve a atualização local; a classe fornece estilos, não persistência. | | slds-button_neutral | Secondary action | Descarte o rascunho e restaure os últimos valores salvos localmente. | ## Guia completo do sistema de design Salesforce Lightning 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. ## Layout e contexto do registro no sistema de design Salesforce Lightning ### Mantenha a identificação do registro acima das tarefas locais > O cabeçalho da página exibe o número do caso, o assunto, a conta e o responsável. Esses valores identificam o registro antes de o usuário alterar qualquer campo. O selo de status resume o registro local salvo, por isso muda ao salvar, e não acompanha um valor selecionado ainda não confirmado. ### Separe os detalhes da atividade A região mais ampla reúne o contexto do cliente e o formulário de edição. A região secundária contém um histórico ordenado. Essa separação permite comparar o trabalho solicitado com as alterações já registradas sem navegar para outra tela. No layout para dispositivos móveis, essas regiões são empilhadas na mesma ordem semântica. ## Salesforce Lightning Cores semânticas e estados do sistema de design ### Interprete os nomes dos tokens como papéis A exportação ui-force diferencia texto padrão, texto secundário, bordas de seleção e fundos de botões da marca. O exemplo mantém o texto principal escuro, os metadados discretos e a ação principal azul. O vermelho é usado no campo inválido e na mensagem de recuperação correspondente, não em todo valor não salvo. ### Não dependa apenas da cor para indicar o estado A prioridade e o status aparecem por extenso no resumo e na nova entrada de atividade. O estado de erro combina o modificador nativo slds-has-error com aria-invalid e uma mensagem associada à área de texto. A confirmação local aparece em uma região de status; apenas um destaque verde não informaria ao usuário o que foi salvo. ## Salesforce Lightning Escala tipográfica e densidade de registros do sistema de design ### Use hierarquia sem títulos exagerados A escala tipográfica numerada publicada começa em 0.625rem e vai até 2.625rem. Um espaço de trabalho de casos não precisa usar o maior tamanho de exibição em todas as regiões. O título nativo do cabeçalho da página identifica o registro, os títulos dos cartões distinguem as áreas e o texto do corpo apresenta a solicitação do cliente e a observação. ### Mantenha os assuntos longos dos registros intactos O layout personalizado permite que o título da página quebre em várias linhas, em vez de truncar o assunto em uma largura reduzida. Os metadados também podem ocupar linhas adicionais. Não reduza todo o texto para acomodar o nome longo de uma conta; teste assuntos e nomes de responsáveis com comprimentos realistas antes de decidir onde truncar com segurança e oferecer uma alternativa que exiba o texto completo. ## Salesforce Lightning Espaçamento e estrutura de blueprint do sistema de design ### Não misture as exportações clássica e variável de espaçamento Este guia lista SPACING_* de ui-force. A exportação separada var-spacing contém valores compactos diferentes; VAR_SPACING_MEDIUM não equivale a SPACING_MEDIUM. Misturar valores com base apenas em nomes parecidos pode deixar o formulário irregular. Escolha o sistema de densidade desejado e mantenha a respectiva origem. ### Use o contêiner do campo de maneira consistente Cada rótulo e controle deve ficar dentro de slds-form-element, com slds-form-element__control envolvendo o campo de entrada e o texto de ajuda logo após ele. A grade original posiciona dois campos de seleção relacionados lado a lado e os empilha em telas estreitas. Essa grade define o layout da aplicação; a estrutura dos campos vem do blueprint nativo. ## Salesforce Lightning Comportamento de rascunhos e registros salvos no sistema de design ### Mantenha o registro salvo separado dos controles O script mantém a última prioridade e o último status salvos em um objeto de registro. A edição dos campos de seleção altera apenas o rascunho. Ao salvar, os valores são copiados para esse objeto, o resumo é atualizado e um item de atividade é adicionado. Assim, descartar o rascunho continua fazendo sentido mesmo após várias edições salvas. ### Não simule sucesso no backend O exemplo não inclui busca por ID de registro, modelo de permissões, API nem banco de dados. O botão e a confirmação deixam explícito que a operação é local. Uma integração de produção com Salesforce precisaria das APIs de dados apropriadas e das respostas do servidor antes de atualizar o status definitivo de um registro. As classes CSS não oferecem essas garantias. ## Salesforce Lightning Validação de campos e atividade do sistema de design ### Faça a observação explicar a alteração A regra definida exige dez caracteres após a remoção de espaços nas extremidades e limita a área de texto a 300 caracteres. Uma observação vazia ou curta impede qualquer alteração no registro, exibe o erro do campo e move o foco para a observação. A edição limpa o erro desatualizado; ao salvar novamente, o valor atual é validado mais uma vez. 1. Tente enviar sem uma observação e confirme que os valores do resumo salvo não mudam. 2. Digite uma observação útil, salve e confira a entrada de atividade mais recente. 3. Altere os campos novamente, descarte o rascunho e confirme que os últimos valores salvos foram restaurados. ### Adicione uma entrada de alteração fácil de ler Uma atualização local bem-sucedida cria um título de atividade com base no status e na prioridade salvos, seguido da observação exata como conteúdo de texto. A nova entrada é inserida no início, para que a alteração mais recente apareça primeiro. A observação nunca é interpretada como HTML, e a atividade inicial estática permanece abaixo das entradas locais do usuário. ## Salesforce Lightning Formulários acessíveis e recuperação no sistema de design ### Use rótulos reais e descrições explícitas Os campos de seleção e a área de texto têm rótulos visíveis associados por meio de for e id. A observação referencia os textos de ajuda e de erro, e o indicador de campo obrigatório tem um título legível. As ações principal e de descarte são botões com os tipos submit e button apropriados, evitando um envio acidental quando o usuário descarta um rascunho. ### Após descartar, retorne a um ponto previsível Descartar restaura a prioridade e o status salvos, limpa a observação e o erro do campo e move o foco para o controle de prioridade. A ação não exclui o histórico de atividades nem redefine o registro ao estado inicial. Essa distinção é importante quando o usuário salva uma alteração, experimenta outra e cancela esse segundo rascunho. ## Salesforce Lightning Integração e escopo de versão do sistema de design CSS ### Instale o pacote de estilos publicado O código-fonte completo importa a distribuição CSS com versão fixada e uma pequena folha de estilos da aplicação. O Vite resolve os URLs das fontes e imagens do pacote. Em seguida, HTML e JavaScript fornecem o comportamento do registro; esta é uma implementação de blueprint CSS, não um wrapper em torno de lightning-record-edit-form. - O pacote nativo CSS fornece a aparência dos campos, botões e cartões. - O HTML original fornece a estrutura e os rótulos do registro. - O JavaScript original controla o estado do rascunho, a validação e a atividade local. ### Trate o código-fonte arquivado como uma referência versionada O repositório oficial no GitHub está arquivado. Por isso, esta página identifica o pacote realmente usado, em vez de apresentá-lo como a recomendação mais recente e ativamente mantida. Verifique os componentes da plataforma Salesforce, as orientações mais recentes do sistema de design e o suporte a ganchos de estilo no ambiente de destino. Deixe explícitas as decisões sobre o pacote CSS escolhido e a integração com o framework. ## Salesforce Lightning Exemplos de componentes do sistema de design ### index.html — espaço de trabalho completo para casos Resumo do registro, formulário e atividade inicial com semântica HTML. ``` Local case workspace

Service workspace · fictional record

Case 004218 · Delivery address update

Northstar Studio · Opened today · Owner: Maya Chen

New

Case details

Contact

Alex Morgan

Channel

Email

Priority

Medium

Status

New

Customer request

Please update the delivery location for order NS-1842 before it leaves the warehouse. The contact is available to confirm the new address.

Update the local case

Explain the change in 10–300 characters. Nothing is sent to Salesforce.

``` Referência de código - Salve na raiz do projeto Vite. ### main.js — rascunho, validação e atividade Comportamento completo da aplicação e importação nativa de CSS. ``` import "@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css"; import "./slds.css"; let record = { priority: "Medium", status: "New" }; const form = document.querySelector("#case-form"), priority = document.querySelector("#priority"), status = document.querySelector("#case-status"), note = document.querySelector("#case-note"), field = document.querySelector("#note-field"), error = document.querySelector("#note-error"), result = document.querySelector("#save-result"); function clearError() { field.classList.remove("slds-has-error"); error.hidden = true; note.removeAttribute("aria-invalid"); result.textContent = ""; } form.addEventListener("input", clearError); form.addEventListener("submit", (e) => { e.preventDefault(); const text = note.value.trim(); if (text.length < 10) { field.classList.add("slds-has-error"); error.hidden = false; note.setAttribute("aria-invalid", "true"); note.focus(); return; } record = { priority: priority.value, status: status.value }; document.querySelector("#read-priority").textContent = record.priority; document.querySelector("#read-status").textContent = record.status; document.querySelector("#status-badge").textContent = record.status; const li = document.createElement("li"), dot = document.createElement("span"), body = document.createElement("div"), h = document.createElement("h3"), p = document.createElement("p"), small = document.createElement("small"); dot.className = "activity-dot"; h.className = "slds-text-heading_small"; h.textContent = record.status + " · " + record.priority + " priority"; p.textContent = text; small.textContent = "Local update · this session"; body.append(h, p, small); li.append(dot, body); document.querySelector("#activity").prepend(li); note.value = ""; clearError(); result.textContent = "Local case updated. No server request was made."; }); document.querySelector("#cancel").addEventListener("click", () => { priority.value = record.priority; status.value = record.status; note.value = ""; clearError(); priority.focus(); }); ``` Referência de código - Salve como src/main.js. Todas as atualizações permanecem locais. ### slds.css — composição responsiva Apenas a grade original do registro, a decoração do histórico e o layout para dispositivos móveis. ``` [hidden] { display: none !important; } body { margin: 0; } .slds-example { background: #f3f3f3; padding: 24px; min-height: 680px; } .record-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 12px; } .record-title h1 { white-space: normal; } .record-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 20px; margin-top: 20px; } .record-grid > .slds-card { margin: 0; min-width: 0; } .summary, .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .summary p { font-weight: 600; margin-top: 4px; } .form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .activity { list-style: none; padding: 0; margin: 0; } .activity li { display: flex; gap: 12px; padding-bottom: 24px; position: relative; } .activity li:not(:last-child):before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 0; border-left: 1px solid #c9c9c9; } .activity-dot { flex: none; width: 11px; height: 11px; background: #0176d3; border-radius: 50%; margin-top: 5px; } .activity p { margin: 8px 0; } .activity small { color: #747474; } .slds-example footer { font-size: 12px; color: #747474; margin-top: 20px; } .slds-form-element.slds-has-error #note-help { color: #444; } @media (max-width: 760px) { .slds-example { padding: 12px; } .record-grid { grid-template-columns: 1fr; } .record-title { gap: 12px; } .field-grid { grid-template-columns: 1fr; } .form-actions { justify-content: flex-start; } } ``` Referência de código - Salve como src/slds.css; os estilos do pacote permanecem separados. ## Salesforce Lightning Configuração de agente do sistema de design ### Ponto de partida para implementação Exemplo de CSS nativo com versão fixada; não é uma implantação em uma organização Salesforce. Ao redistribuir os recursos incluídos no pacote, mantenha os avisos sobre o pacote e os recursos. ``` npm create vite@latest slds-case -- --template vanilla cd slds-case npm install npm install @salesforce-ux/design-system@2.264.1 # Replace index.html; add src/main.js and src/slds.css from the complete examples. npm run dev ``` ### Um prompt para seu projeto ``` Crie um espaço de trabalho focado em casos usando os blueprints CSS do SLDS com versão fixada. Mantenha distintas a identidade do registro, o contexto do cliente, o estado salvo e o rascunho em edição. Use a estrutura exata dos campos, referências reais a tokens e o código-fonte completo apresentado aqui. Valide a observação antes de alterar o resumo, preserve a atividade local após descartar e não sugira que há uma conexão com o backend do Salesforce. ``` ## Salesforce Lightning Fontes e escopo do sistema de design Guia de OpenDesign para o pacote CSS do SLDS com versão fixada. A prévia usa CSS nativo com HTML e JavaScript originais, dados fictícios de casos e estado local. Ela não carrega Lightning Web Components nem se conecta ao Salesforce. O repositório upstream está arquivado; para trabalhos em produção, avalie as orientações atuais da plataforma Salesforce. - Repositório oficial do código-fonte Código-fonte arquivado, blueprints e histórico do pacote. - Exportação de tokens fixados Valores exatos de espaçamento clássico, tipografia, raio e cor. - Blueprints de componentes Padrões nativos de marcação e modificadores. ## Salesforce Lightning Recursos relacionados do sistema de design ### Samsung One UI Conheça a estrutura de visualização e interação do One UI, suas diretrizes de margens de 24 dp e a exigência de ampliação do texto em 200% por meio de uma prévia completa e original das preferências de leitura, com aparência escura e opção explícita de redefinição. ### SAP Fiori Use o tema Horizon de SAP Fiori com UI5 Web Components: parâmetros reais do tema, densidade de conteúdo explícita, estados semânticos de valor e uma composição para solicitações de compra com validação local. ### SEEK Braid Entenda o Braid por meio de uma composição original para busca de empregos: variáveis com escopo de tema, quatro breakpoints reais, texto contextual, botões com tonalidades distintas e um campo controlado que explica a validação em vez de desativar a ação. - [Referência de implementação](https://github.com/salesforce-ux/design-system) - [Fonte](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Fonte](https://github.com/salesforce-ux/design-system/tree/main/ui/components) - [Referência de código](https://github.com/salesforce-ux/design-system) - [Repositório oficial do código-fonte Código-fonte arquivado, blueprints e histórico do pacote.](https://github.com/salesforce-ux/design-system) - [Exportação de tokens fixados Valores exatos de espaçamento clássico, tipografia, raio e cor.](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Blueprints de componentes Padrões nativos de marcação e modificadores.](https://github.com/salesforce-ux/design-system/tree/main/ui/components)