# Système de design Salesforce Lightning ## Salesforce Lightning Aperçu de l’interface du système de design Modifiez la priorité ou le statut, validez une note de mise à jour, enregistrez une entrée d’activité locale, puis abandonnez un brouillon ultérieur sans modifier l’enregistrement enregistré. ## Salesforce Lightning Référence de conception du système de design Package natif publié @salesforce-ux/design-system 2.264.1 CSS et export de jetons ui-force. Il s’agit d’une référence figée au modèle classique, et non d’une affirmation de compatibilité avec le langage de conception SLDS 2 plus récent ou avec un moteur Lightning Web Components. Le dépôt historique en amont est archivé. ### Surfaces des enregistrements et texte sémantique | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | COLOR_BACKGROUND | rgb(243, 243, 243) | Référence du package publié. Respectez le rôle indiqué du texte, de la surface ou de l’action au lieu d’appliquer partout une seule couleur de marque. | | COLOR_BACKGROUND_ALT | rgb(255, 255, 255) | Référence du package publié. Respectez le rôle indiqué du texte, de la surface ou de l’action au lieu d’appliquer partout une seule couleur de marque. | | COLOR_TEXT_DEFAULT | rgb(3, 45, 96) | Référence du package publié. Respectez le rôle indiqué du texte, de la surface ou de l’action au lieu d’appliquer partout une seule couleur de marque. | | COLOR_TEXT_WEAK | rgb(116, 116, 116) | Référence du package publié. Respectez le rôle indiqué du texte, de la surface ou de l’action au lieu d’appliquer partout une seule couleur de marque. | | COLOR_BORDER | rgb(201, 201, 201) | Référence du package publié. Respectez le rôle indiqué du texte, de la surface ou de l’action au lieu d’appliquer partout une seule couleur de marque. | | COLOR_BORDER_ERROR | rgb(234, 0, 30) | Référence du package publié. Respectez le rôle indiqué du texte, de la surface ou de l’action au lieu d’appliquer partout une seule couleur de marque. | | COLOR_BORDER_SELECTION | rgb(1, 118, 211) | Référence du package publié. Respectez le rôle indiqué du texte, de la surface ou de l’action au lieu d’appliquer partout une seule couleur de marque. | | COLOR_BACKGROUND_BUTTON_BRAND | rgb(1, 118, 211) | Référence du package publié. Respectez le rôle indiqué du texte, de la surface ou de l’action au lieu d’appliquer partout une seule couleur de marque. | | COLOR_BACKGROUND_BUTTON_BRAND_HOVER | rgb(1, 68, 134) | Référence du package publié. Respectez le rôle indiqué du texte, de la surface ou de l’action au lieu d’appliquer partout une seule couleur de marque. | | COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE | rgb(3, 45, 96) | Référence du package publié. Respectez le rôle indiqué du texte, de la surface ou de l’action au lieu d’appliquer partout une seule couleur de marque. | ### Échelle classique d’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | SPACING_X_SMALL | 0.5rem | Export classique SPACING_*. Il ne s’agit pas de l’ensemble distinct VAR_SPACING_* compact. | | SPACING_XXX_SMALL | 0.125rem | Export classique SPACING_*. Il ne s’agit pas de l’ensemble distinct VAR_SPACING_* compact. | | SPACING_XX_SMALL | 0.25rem | Export classique SPACING_*. Il ne s’agit pas de l’ensemble distinct VAR_SPACING_* compact. | | SPACING_SMALL | 0.75rem | Export classique SPACING_*. Il ne s’agit pas de l’ensemble distinct VAR_SPACING_* compact. | | SPACING_MEDIUM | 1rem | Export classique SPACING_*. Il ne s’agit pas de l’ensemble distinct VAR_SPACING_* compact. | | SPACING_NONE | 0 | Export classique SPACING_*. Il ne s’agit pas de l’ensemble distinct VAR_SPACING_* compact. | | SPACING_X_LARGE | 2rem | Export classique SPACING_*. Il ne s’agit pas de l’ensemble distinct VAR_SPACING_* compact. | | SPACING_XX_LARGE | 3rem | Export classique SPACING_*. Il ne s’agit pas de l’ensemble distinct VAR_SPACING_* compact. | | SPACING_LARGE | 1.5rem | Export classique SPACING_*. Il ne s’agit pas de l’ensemble distinct VAR_SPACING_* compact. | ### Échelle typographique | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | FONT_SIZE_1 | 0.625rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | | FONT_SIZE_2 | 0.75rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | | FONT_SIZE_3 | 0.8125rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | | FONT_SIZE_4 | 0.875rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | | FONT_SIZE_5 | 1rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | | FONT_SIZE_6 | 1.125rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | | FONT_SIZE_7 | 1.25rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | | FONT_SIZE_8 | 1.5rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | | FONT_SIZE_9 | 1.75rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | | FONT_SIZE_10 | 2rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | | FONT_SIZE_11 | 2.625rem | Choisissez la taille du texte en fonction de son rôle, tout en préservant la lisibilité des notes de dossier et des libellés de champ. | ### Rayon des angles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | BORDER_RADIUS_SMALL | 0.125rem | Référence publiée des rayons. Un indicateur d’état circulaire se distingue d’un contrôle de formulaire rectangulaire. | | BORDER_RADIUS_MEDIUM | 0.25rem | Référence publiée des rayons. Un indicateur d’état circulaire se distingue d’un contrôle de formulaire rectangulaire. | | BORDER_RADIUS_LARGE | 0.5rem | Référence publiée des rayons. Un indicateur d’état circulaire se distingue d’un contrôle de formulaire rectangulaire. | | BORDER_RADIUS_CIRCLE | 50% | Référence publiée des rayons. Un indicateur d’état circulaire se distingue d’un contrôle de formulaire rectangulaire. | ### Anatomie native du modèle CSS | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | slds-page-header | Record context | Conservez l’identité et le résumé du dossier au-dessus du formulaire de modification. | | slds-card | Grouped content region | Les détails du dossier et son historique occupent des régions sémantiques distinctes. | | slds-form-element | Label + control + help | Regroupez chaque valeur modifiable dans un champ cohérent. | | slds-has-error | Invalid field modifier | Associez-le à aria-invalid et à un message d’erreur précis. | | slds-button_brand | Primary action | Enregistrez la modification locale ; la classe assure la mise en forme, pas la persistance. | | slds-button_neutral | Secondary action | Abandonnez le brouillon et rétablissez les dernières valeurs enregistrées localement. | ## Salesforce Lightning Guide complet du système de design Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Salesforce Lightning Mise en page et contexte d’un dossier dans le système de design ### Placez l’identité du dossier au-dessus des tâches locales > L’en-tête de la page contient un numéro de dossier, un objet, un compte et un responsable. Ces informations identifient l’objet avant que l’utilisateur ne modifie un champ. Le badge d’état résume le dossier local enregistré : il est donc mis à jour lors de l’enregistrement, et non à chaque changement non validé d’une valeur de sélection. ### Séparez les détails de l’historique La zone principale, plus large, regroupe le contexte client et le formulaire de modification. La zone secondaire contient un historique ordonné. Cette séparation permet à l’utilisateur de comparer le travail demandé aux changements déjà consignés sans passer à un autre écran. Sur mobile, ces zones sont empilées dans le même ordre sémantique. ## Salesforce Lightning Couleurs sémantiques et états du système de design ### Interprétez les noms des jetons selon leur rôle L’export ui-force distingue le texte par défaut, le texte atténué, les bordures de sélection et les arrière-plans des boutons de marque. L’exemple conserve un texte courant foncé, des métadonnées discrètes et une action principale bleue. Le rouge est réservé au champ invalide et au message indiquant comment corriger l’erreur, et non à toute valeur non enregistrée. ### Signalez l’état autrement que par la couleur La priorité et l’état sont affichés sous forme de mots dans le résumé et dans la nouvelle entrée d’activité. L’état d’erreur associe le modificateur natif slds-has-error à aria-invalid et à un message lié à la zone de texte. La confirmation locale est affichée dans une région de statut ; un accent vert, à lui seul, n’indiquerait pas à l’utilisateur ce qui a été enregistré. ## Salesforce Lightning Échelle typographique et densité des dossiers du système de design ### Créez une hiérarchie sans titres surdimensionnés L’échelle typographique numérotée publiée va de 0.625rem à 2.625rem. Un espace de travail consacré aux dossiers n’a pas besoin d’utiliser la plus grande taille d’affichage dans chaque zone. Le titre natif de l’en-tête de page identifie le dossier, les titres des cartes distinguent les sections et le texte courant présente la demande du client et la note. ### Conservez les objets longs des dossiers en entier La mise en page personnalisée permet au titre de la page de passer à la ligne plutôt que de tronquer l’objet sur un écran étroit. Les métadonnées peuvent également s’étaler sur plusieurs lignes. Ne réduisez pas la taille de tout le texte pour compenser un nom de compte long ; testez des longueurs réalistes pour l’objet et le responsable avant de décider où une troncature peut s’accompagner d’une solution de remplacement affichant le texte complet. ## Salesforce Lightning Espacement et structure du blueprint du système de design ### Ne mélangez pas les exports d’espacement classiques et ceux basés sur des variables Ce guide répertorie les valeurs SPACING_* de ui-force. L’export var-spacing distinct contient d’autres valeurs compactes ; VAR_SPACING_MEDIUM ne correspond pas à SPACING_MEDIUM. Mélanger des valeurs sur la seule base de noms similaires peut déséquilibrer un formulaire. Choisissez le système de densité voulu et conservez-en la source. ### Utilisez systématiquement le conteneur de champ Chaque libellé et contrôle doit se trouver dans slds-form-element, avec le champ de saisie entouré de slds-form-element__control et le texte d’aide placé immédiatement après. La grille d’origine dispose côte à côte deux champs de sélection associés, puis les empile sur les écrans étroits. Cette grille relève de la mise en page de l’application, tandis que la structure des champs provient du blueprint natif. ## Salesforce Lightning Comportement des brouillons et des dossiers enregistrés dans le système de design ### Conservez séparément le dossier enregistré et les contrôles Le script conserve la dernière priorité et le dernier état enregistrés dans un objet record. La modification des champs de sélection ne change que le brouillon. L’enregistrement copie les valeurs dans cet objet, met à jour le résumé et ajoute une entrée à l’historique. L’action « Abandonner le brouillon » reste ainsi pertinente même après plusieurs modifications enregistrées avec succès. ### Ne prétendez pas qu’une opération côté serveur a réussi L’exemple ne comporte ni recherche par identifiant de dossier, ni modèle d’autorisations, ni API ni base de données. Le bouton et le message de confirmation précisent explicitement qu’il s’agit d’une opération locale. Une intégration Salesforce en production nécessiterait les API de données appropriées et des réponses du serveur avant de mettre à jour définitivement l’état d’un dossier. Les classes CSS ne peuvent pas offrir ces garanties. ## Salesforce Lightning Validation des champs et historique du système de design ### Expliquez le changement dans la note La règle définie exige au moins dix caractères après suppression des espaces de début et de fin, et limite la zone de texte à 300 caractères. Une note vide ou trop courte empêche toute modification du dossier, affiche une erreur sur le champ et place le focus sur la note. Toute modification efface l’erreur devenue obsolète ; le prochain enregistrement valide à nouveau la valeur actuelle. 1. Soumettez sans note et vérifiez que les valeurs enregistrées dans le résumé restent inchangées. 2. Saisissez une note utile, enregistrez-la et examinez la nouvelle entrée d’activité. 3. Modifiez à nouveau les champs, abandonnez le brouillon et vérifiez que les dernières valeurs enregistrées sont rétablies. ### Ajoutez une entrée de changement facile à lire Une mise à jour locale réussie crée un titre d’activité à partir de l’état et de la priorité enregistrés, suivi du texte exact de la note. La nouvelle entrée est insérée en tête de liste afin que le changement le plus récent apparaisse en premier. La note n’est jamais interprétée comme HTML, et l’entrée d’activité initiale statique reste sous les entrées locales de l’utilisateur. ## Salesforce Lightning Formulaires accessibles et récupération dans le système de design ### Utilisez de vrais libellés et des descriptions explicites Les champs de sélection et la zone de texte ont des libellés visibles associés au moyen de for et id. La note fait référence au texte d’aide et au message d’erreur, et l’indicateur de champ obligatoire possède un titre lisible. Les actions principales et d’abandon sont des boutons avec les types submit et button appropriés, ce qui évite de soumettre accidentellement le formulaire lorsque l’utilisateur abandonne un brouillon. ### Après l’abandon, revenez à un emplacement prévisible L’abandon rétablit la priorité et l’état enregistrés, efface la note et l’erreur du champ, puis place le focus sur le contrôle de priorité. Il ne supprime pas l’historique d’activité et ne réinitialise pas le dossier à son état initial. Cette distinction compte lorsqu’un utilisateur enregistre une première modification, essaie ensuite un autre changement, puis annule ce second brouillon. ## Salesforce Lightning Intégration CSS et portée des versions du système de design ### Installez le package de styles publié Le code source complet importe la distribution CSS épinglée et une petite feuille de style pour l’application. Vite résout les URL des polices et des images du package. HTML et JavaScript fournissent ensuite le comportement de la fiche ; il s’agit d’une implémentation fondée sur les plans CSS, et non d’une surcouche autour de lightning-record-edit-form. - Le package natif CSS fournit l’apparence des champs, des boutons et des cartes. - Le HTML d’origine fournit la structure et les libellés de la fiche. - Le JavaScript d’origine gère l’état du brouillon, la validation et l’activité locale. ### Considérez le code source archivé comme une référence versionnée Le dépôt GitHub officiel étant archivé, cette page précise le package réellement utilisé au lieu de le présenter comme une dernière recommandation activement maintenue. Vérifiez les composants de la plateforme Salesforce, les consignes plus récentes du système de design et la prise en charge des hooks de style pour l’environnement cible. Indiquez clairement le package CSS retenu et les choix d’intégration au framework. ## Exemples de composants du système de design Salesforce Lightning ### index.html — espace de travail complet pour un dossier Résumé de la fiche, formulaire et activité initiale en HTML sémantique. ``` 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.

``` Référence du code - Enregistrez à la racine du projet Vite. ### main.js — brouillon, validation et activité Comportement complet de l’application et import natif 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(); }); ``` Référence du code - À enregistrer sous src/main.js. Toutes les mises à jour restent locales. ### slds.css — mise en page adaptative Uniquement la grille de la fiche d’origine, la décoration de l’historique et la mise en page mobile. ``` [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; } } ``` Référence du code - À enregistrer sous src/slds.css ; les styles du package restent séparés. ## Configuration d’agent pour le système de design Salesforce Lightning ### Point de départ de l’implémentation Exemple natif CSS épinglé, sans déploiement sur une organisation Salesforce. Conservez les mentions relatives au package et aux ressources lors de la redistribution des ressources intégrées. ``` 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 ``` ### Un prompt pour votre projet ``` Créez un espace de travail ciblé pour un dossier à l’aide des plans SLDS CSS épinglés. Distinguez l’identité de la fiche, le contexte client, l’état enregistré et le brouillon en cours de modification. Reprenez ici l’anatomie exacte des champs, les références réelles aux jetons et le code source complet. Validez la note avant de modifier le résumé, conservez l’activité locale après l’abandon du brouillon et ne laissez pas entendre qu’une connexion à un serveur Salesforce existe. ``` ## Sources et périmètre du système de design Salesforce Lightning Guide OpenDesign du package SLDS CSS épinglé. L’aperçu utilise les composants natifs CSS avec HTML et JavaScript d’origine, des données fictives de dossier et un état local. Il ne charge pas Lightning Web Components et ne se connecte pas à Salesforce. Le dépôt en amont est archivé ; pour tout travail en production, évaluez les consignes actuelles de la plateforme Salesforce. - Dépôt source officiel Source archivée, plans et historique du package. - Export des jetons épinglés Valeurs classiques exactes d’espacement, de typographie, d’arrondi et de couleur. - Plans de composants Modèles de balisage natif et de modificateurs. ## Ressources connexes au système de design Salesforce Lightning ### Samsung One UI Découvrez la structure de consultation et d’interaction de One UI, les recommandations de marge de 24dp et l’exigence de mise à l’échelle du texte à 200 % grâce à un aperçu complet et original des préférences de lecture, avec apparence sombre et rétablissement explicite après réinitialisation. ### SAP Fiori Utilisez le thème Horizon de SAP Fiori avec UI5 Web Components : véritables paramètres de thème, densité du contenu définie explicitement, états de valeur sémantiques et composition d’une demande d’achat avec validation locale. ### SEEK Braid Découvrez Braid à travers une composition originale de recherche d’emploi : des variables propres à chaque thème, quatre véritables points de rupture, du texte contextuel, des styles de boutons distincts et un champ contrôlé qui explique les erreurs de validation au lieu de désactiver l’action. - [Référence de mise en œuvre](https://github.com/salesforce-ux/design-system) - [Source](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Source](https://github.com/salesforce-ux/design-system/tree/main/ui/components) - [Référence du code](https://github.com/salesforce-ux/design-system) - [Dépôt source officiel Source archivée, plans et historique du package.](https://github.com/salesforce-ux/design-system) - [Export des jetons épinglés Valeurs classiques exactes d’espacement, de typographie, d’arrondi et de couleur.](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Plans de composants Modèles de balisage natif et de modificateurs.](https://github.com/salesforce-ux/design-system/tree/main/ui/components)