# Salesforce Lightning-Designsystem ## Salesforce Lightning-Designsystem: Oberflächenvorschau Ändere Priorität oder Status, validiere eine Änderungsnotiz, speichere einen lokalen Aktivitätseintrag und verwirf einen späteren Entwurf, ohne den gespeicherten Datensatz zu ändern. ## Salesforce Lightning-Designsystem: Designreferenz Veröffentlichtes natives CSS aus @salesforce-ux/design-system 2.264.1 und ui-force-Tokenexport. Dies ist eine fixierte Referenz für das klassische Blueprint, kein Anspruch auf Kompatibilität mit der neueren SLDS-2-Designsprache oder einer Lightning Web Components-Runtime. Das historische Upstream-Repository ist archiviert. ### Oberflächen und semantischer Text für Datensätze | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | COLOR_BACKGROUND | rgb(243, 243, 243) | Referenz zum veröffentlichten Paket. Behalte die benannte Rolle für Text, Oberfläche oder Aktion bei, statt überall dieselbe Markenfarbe anzuwenden. | | COLOR_BACKGROUND_ALT | rgb(255, 255, 255) | Referenz zum veröffentlichten Paket. Behalte die benannte Rolle für Text, Oberfläche oder Aktion bei, statt überall dieselbe Markenfarbe anzuwenden. | | COLOR_TEXT_DEFAULT | rgb(3, 45, 96) | Referenz zum veröffentlichten Paket. Behalte die benannte Rolle für Text, Oberfläche oder Aktion bei, statt überall dieselbe Markenfarbe anzuwenden. | | COLOR_TEXT_WEAK | rgb(116, 116, 116) | Referenz zum veröffentlichten Paket. Behalte die benannte Rolle für Text, Oberfläche oder Aktion bei, statt überall dieselbe Markenfarbe anzuwenden. | | COLOR_BORDER | rgb(201, 201, 201) | Referenz zum veröffentlichten Paket. Behalte die benannte Rolle für Text, Oberfläche oder Aktion bei, statt überall dieselbe Markenfarbe anzuwenden. | | COLOR_BORDER_ERROR | rgb(234, 0, 30) | Referenz zum veröffentlichten Paket. Behalte die benannte Rolle für Text, Oberfläche oder Aktion bei, statt überall dieselbe Markenfarbe anzuwenden. | | COLOR_BORDER_SELECTION | rgb(1, 118, 211) | Referenz zum veröffentlichten Paket. Behalte die benannte Rolle für Text, Oberfläche oder Aktion bei, statt überall dieselbe Markenfarbe anzuwenden. | | COLOR_BACKGROUND_BUTTON_BRAND | rgb(1, 118, 211) | Referenz zum veröffentlichten Paket. Behalte die benannte Rolle für Text, Oberfläche oder Aktion bei, statt überall dieselbe Markenfarbe anzuwenden. | | COLOR_BACKGROUND_BUTTON_BRAND_HOVER | rgb(1, 68, 134) | Referenz zum veröffentlichten Paket. Behalte die benannte Rolle für Text, Oberfläche oder Aktion bei, statt überall dieselbe Markenfarbe anzuwenden. | | COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE | rgb(3, 45, 96) | Referenz zum veröffentlichten Paket. Behalte die benannte Rolle für Text, Oberfläche oder Aktion bei, statt überall dieselbe Markenfarbe anzuwenden. | ### Klassische Abstandsskala | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | SPACING_X_SMALL | 0.5rem | Klassischer SPACING_*-Export. Nicht zu verwechseln mit der separaten kompakten VAR_SPACING_*-Skala. | | SPACING_XXX_SMALL | 0.125rem | Klassischer SPACING_*-Export. Nicht zu verwechseln mit der separaten kompakten VAR_SPACING_*-Skala. | | SPACING_XX_SMALL | 0.25rem | Klassischer SPACING_*-Export. Nicht zu verwechseln mit der separaten kompakten VAR_SPACING_*-Skala. | | SPACING_SMALL | 0.75rem | Klassischer SPACING_*-Export. Nicht zu verwechseln mit der separaten kompakten VAR_SPACING_*-Skala. | | SPACING_MEDIUM | 1rem | Klassischer SPACING_*-Export. Nicht zu verwechseln mit der separaten kompakten VAR_SPACING_*-Skala. | | SPACING_NONE | 0 | Klassischer SPACING_*-Export. Nicht zu verwechseln mit der separaten kompakten VAR_SPACING_*-Skala. | | SPACING_X_LARGE | 2rem | Klassischer SPACING_*-Export. Nicht zu verwechseln mit der separaten kompakten VAR_SPACING_*-Skala. | | SPACING_XX_LARGE | 3rem | Klassischer SPACING_*-Export. Nicht zu verwechseln mit der separaten kompakten VAR_SPACING_*-Skala. | | SPACING_LARGE | 1.5rem | Klassischer SPACING_*-Export. Nicht zu verwechseln mit der separaten kompakten VAR_SPACING_*-Skala. | ### Typografieskala | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | FONT_SIZE_1 | 0.625rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | | FONT_SIZE_2 | 0.75rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | | FONT_SIZE_3 | 0.8125rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | | FONT_SIZE_4 | 0.875rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | | FONT_SIZE_5 | 1rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | | FONT_SIZE_6 | 1.125rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | | FONT_SIZE_7 | 1.25rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | | FONT_SIZE_8 | 1.5rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | | FONT_SIZE_9 | 1.75rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | | FONT_SIZE_10 | 2rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | | FONT_SIZE_11 | 2.625rem | Wähle die Textgröße nach ihrer Funktion und achte darauf, dass Fallnotizen und Feldbeschriftungen gut lesbar bleiben. | ### Eckenradius | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | BORDER_RADIUS_SMALL | 0.125rem | Referenz zu veröffentlichten Rundungen. Eine kreisförmige Statusmarkierung unterscheidet sich von einem rechteckigen Formularsteuerelement. | | BORDER_RADIUS_MEDIUM | 0.25rem | Referenz zu veröffentlichten Rundungen. Eine kreisförmige Statusmarkierung unterscheidet sich von einem rechteckigen Formularsteuerelement. | | BORDER_RADIUS_LARGE | 0.5rem | Referenz zu veröffentlichten Rundungen. Eine kreisförmige Statusmarkierung unterscheidet sich von einem rechteckigen Formularsteuerelement. | | BORDER_RADIUS_CIRCLE | 50% | Referenz zu veröffentlichten Rundungen. Eine kreisförmige Statusmarkierung unterscheidet sich von einem rechteckigen Formularsteuerelement. | ### Anatomie des nativen CSS-Blueprints | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | slds-page-header | Record context | Platziere Identität und Zusammenfassung des Vorgangs oberhalb des Bearbeitungsformulars. | | slds-card | Grouped content region | Details zum Vorgang und Aktivitäten befinden sich in getrennten semantischen Bereichen. | | slds-form-element | Label + control + help | Fasse jeden bearbeitbaren Wert in einem zusammengehörigen Feld zusammen. | | slds-has-error | Invalid field modifier | Setze das Attribut neben aria-invalid und eine konkrete Fehlermeldung. | | slds-button_brand | Primary action | Speichere die lokale Änderung. Die Klasse stellt das Styling bereit, nicht die Persistenz. | | slds-button_neutral | Secondary action | Verwirf den Entwurf und stelle die zuletzt lokal gespeicherten Werte wieder her. | ## Salesforce Lightning-Designsystem: Vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Salesforce Lightning-Designsystem: Datensatzlayout und Kontext ### Die Datensatzidentität oberhalb lokaler Aufgaben platzieren > Der Seitenkopf enthält eine Vorgangsnummer, einen Betreff, ein Konto und eine zuständige Person. Diese Werte kennzeichnen das Objekt, bevor die Person ein Feld ändert. Das Statusbadge fasst den lokal gespeicherten Datensatz zusammen. Es ändert sich daher erst beim Speichern und nicht schon beim Ändern eines noch nicht übernommenen Auswahlfelds. ### Details und Aktivitäten voneinander trennen Der größere Bereich vereint den Kundenkontext und das Bearbeitungsformular. Der sekundäre Bereich enthält einen chronologischen Verlauf. Durch diese Trennung können Nutzer die angeforderte Arbeit mit bereits erfassten Änderungen vergleichen, ohne zu einer anderen Seite wechseln zu müssen. Auf Mobilgeräten werden die Bereiche in derselben semantischen Reihenfolge untereinander angeordnet. ## Salesforce Lightning Semantische Farben und Zustände des Designsystems ### Token-Namen als Rollen verstehen Der Export ui-force unterscheidet zwischen Standardtext, zurückhaltendem Text, ausgewählten Rahmen und Markenfarben für Schaltflächenhintergründe. Das Beispiel hält den Fließtext dunkel, Metadaten zurückhaltend und die primäre Aktion blau. Rot ist dem ungültigen Feld und seiner schriftlichen Fehlermeldung vorbehalten – nicht jedem ungespeicherten Wert. ### Zustände nicht nur durch Farben vermitteln Priorität und Status werden in der Zusammenfassung und im neuen Aktivitätseintrag als Wörter angezeigt. Der Fehlerzustand kombiniert den nativen Modifier slds-has-error mit aria-invalid und einer Meldung, die dem Textbereich zugeordnet ist. Die lokale Bestätigung steht in einem Statusbereich; ein grüner Akzent allein würde nicht vermitteln, was gespeichert wurde. ## Salesforce Lightning Typografische Abstufungen und Datensatzdichte im Designsystem ### Hierarchie ohne übergroße Überschriften schaffen Die veröffentlichte nummerierte Schriftgrößenskala beginnt bei 0.625rem und reicht bis 2.625rem. Ein Arbeitsbereich für Fälle benötigt nicht in jedem Bereich die größte Anzeigegröße. Der native Titel im Seitenkopf kennzeichnet den Datensatz, Kartenüberschriften unterscheiden die Bereiche, und der normale Fließtext enthält die Kundenanfrage und den Vermerk. ### Lange Betreffzeilen von Datensätzen vollständig anzeigen Das benutzerdefinierte Layout lässt den Seitentitel umbrechen, statt den Betreff bei schmaler Darstellung abzuschneiden. Metadaten können auf zusätzliche Zeilen verteilt werden. Verringern Sie nicht die Schriftgröße aller Texte, nur weil ein Kontoname lang ist. Testen Sie realistische Längen für Betreff und Verantwortliche, bevor Sie entscheiden, an welcher Stelle eine Kürzung mit einer sicheren Alternative zur Anzeige des vollständigen Textes vertretbar ist. ## Salesforce Lightning Abstände und Blueprint-Struktur des Designsystems ### Klassische und variable Abstandsexporte nicht vermischen Dieser Leitfaden führt SPACING_* aus ui-force auf. Der separate Export var-spacing enthält andere, kompakte Werte; VAR_SPACING_MEDIUM entspricht nicht SPACING_MEDIUM. Werden Werte nur aufgrund ähnlicher Namen vermischt, kann das Formular ungleichmäßig wirken. Wählen Sie das gewünschte Dichtesystem und verwenden Sie konsequent dessen Quelle. ### Feld-Wrapper durchgängig verwenden Jede Beschriftung und jedes Steuerelement gehört in ein slds-form-element. Das Eingabefeld und der Hilfetext werden von slds-form-element__control umschlossen, wobei der Hilfetext direkt darauf folgt. Das ursprüngliche Raster ordnet zwei zusammengehörige Auswahlfelder nebeneinander an und stapelt sie auf schmalen Bildschirmen. Dieses Raster ist Teil des Anwendungs-Layouts; der Aufbau der Felder stammt hingegen aus dem nativen Blueprint. ## Salesforce Lightning Entwurfs- und Speicherverhalten von Datensätzen im Designsystem ### Gespeicherten Datensatz getrennt von den Steuerelementen verwalten Das Skript speichert die zuletzt gespeicherte Priorität und den Status in einem Datensatzobjekt. Änderungen an den Auswahlfeldern betreffen nur den Entwurf. Beim Speichern werden die Werte in das Objekt übernommen, die Zusammenfassung aktualisiert und ein Aktivitätseintrag hinzugefügt. So ist „Entwurf verwerfen“ auch nach mehreren erfolgreich gespeicherten Änderungen sinnvoll. ### Keine Backend-Erfolge vortäuschen Das Beispiel enthält weder eine Suche nach Datensatz-ID noch ein Berechtigungsmodell, API oder eine Datenbank. Die Schaltfläche und die Bestätigung weisen ausdrücklich darauf hin, dass der Vorgang lokal erfolgt. Eine Integration in Salesforce für den Produktionseinsatz benötigt die passenden Daten-APIs und Serverantworten, bevor ein endgültiger Datensatzstatus aktualisiert werden kann. CSS-Klassen können diese Garantien nicht bieten. ## Salesforce Lightning Feldvalidierung und Aktivitäten im Designsystem ### Mit dem Vermerk die Änderung erläutern Die implementierte Regel verlangt mindestens zehn Zeichen nach dem Entfernen umgebender Leerzeichen und begrenzt den Textbereich auf 300 Zeichen. Ein leerer oder zu kurzer Vermerk verhindert sämtliche Änderungen am Datensatz, zeigt den Feldfehler an und setzt den Fokus auf den Vermerk. Bei einer Bearbeitung wird der veraltete Fehler gelöscht; beim nächsten Speicherversuch wird der aktuelle Wert erneut geprüft. 1. Senden Sie das Formular ohne Vermerk ab und prüfen Sie, ob sich die gespeicherten Werte in der Zusammenfassung nicht ändern. 2. Geben Sie einen aussagekräftigen Vermerk ein, speichern Sie ihn und prüfen Sie den neuesten Aktivitätseintrag. 3. Ändern Sie die Felder erneut, verwerfen Sie den Entwurf und prüfen Sie, ob die zuletzt gespeicherten Werte wiederhergestellt werden. ### Einen gut lesbaren Änderungseintrag hinzufügen Bei einer erfolgreichen lokalen Aktualisierung wird ein Aktivitätstitel aus dem gespeicherten Status und der Priorität erstellt. Darunter folgt der genaue Vermerk als Textinhalt. Der neue Eintrag wird vorangestellt, sodass die jüngste Änderung zuerst erscheint. Der Vermerk wird niemals als HTML interpretiert, und der statische ursprüngliche Aktivitätseintrag bleibt unter den lokalen Einträgen der Nutzer erhalten. ## Salesforce Lightning Barrierefreie Formulare und Fehlerbehebung im Designsystem ### Echte Beschriftungen und explizite Beschreibungen verwenden Auswahlfelder und Textbereich haben sichtbare Beschriftungen, die über for und id zugeordnet sind. Der Vermerk verweist auf den Hilfs- und Fehlertext, und das Pflichtfeldzeichen hat einen lesbaren Titel. Die Aktionen „Speichern“ und „Entwurf verwerfen“ sind Schaltflächen mit den passenden Typen submit und button. So wird ein versehentliches Absenden beim Verwerfen eines Entwurfs verhindert. ### Nach dem Verwerfen an eine vorhersehbare Stelle zurückkehren Beim Verwerfen werden die gespeicherte Priorität und der gespeicherte Status wiederhergestellt, der Vermerk und der Feldfehler gelöscht und der Fokus auf das Prioritätsfeld gesetzt. Der Aktivitätsverlauf wird weder gelöscht noch der Datensatz auf seinen ursprünglichen Zustand zurückgesetzt. Das ist wichtig, wenn ein Nutzer einmal speichert, eine weitere Änderung ausprobiert und anschließend diesen zweiten Entwurf abbricht. ## Salesforce Lightning Integration und Versionsumfang des Designsystems CSS ### Das veröffentlichte Styling-Paket installieren Der vollständige Quellcode importiert die Version der Distribution CSS, auf die er festgelegt ist, sowie ein kleines Anwendungs-Stylesheet. Vite löst die Schrift- und Bild-URLs des Pakets auf. HTML und JavaScript stellen anschließend das Verhalten für Datensätze bereit. Dies ist eine CSS-Implementierung des Blueprints, kein Wrapper um lightning-record-edit-form. - Das native Paket CSS stellt die Darstellung von Feldern, Schaltflächen und Karten bereit. - Der ursprüngliche HTML stellt die Datensatzstruktur und Beschriftungen bereit. - Der ursprüngliche JavaScript verwaltet den Entwurfszustand, die Validierung und lokale Aktivitäten. ### Den archivierten Quellcode als versionsgebundene Referenz behandeln Das offizielle GitHub-Repository ist archiviert. Daher nennt diese Seite das tatsächlich verwendete Paket, statt es als aktuell gepflegte neueste Empfehlung darzustellen. Salesforce-Plattformkomponenten, neuere Designsystem-Richtlinien und die Unterstützung von Styling-Hooks sollten für die jeweilige Zielumgebung geprüft werden. Machen Sie die Auswahl des CSS-Pakets und die Entscheidungen zur Framework-Integration transparent. ## Salesforce Lightning Komponentenbeispiele des Designsystems ### index.html — vollständiger Case-Arbeitsbereich Die Zusammenfassung des Datensatzes, das Formular und die ersten Aktivitäten in semantischem 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.

``` Code-Referenz - Im Stammverzeichnis des Vite-Projekts speichern. ### main.js — Entwurf, Validierung und Aktivitäten Das vollständige Anwendungsverhalten und der native Import von 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(); }); ``` Code-Referenz - Als src/main.js speichern. Alle Änderungen bleiben lokal. ### slds.css — responsives Layout Nur das ursprüngliche Datensatzraster, die Verlaufsdekoration und das mobile Layout. ``` [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; } } ``` Code-Referenz - Als src/slds.css speichern; die Paketstile bleiben getrennt. ## Einrichtung des Salesforce Lightning-Designsystem-Agenten ### Ausgangspunkt für die Implementierung Fixiertes natives CSS-Beispiel, keine Bereitstellung in einer Salesforce-Organisation. Hinweise zu Paketen und Assets bei der Weitergabe gebündelter Assets beibehalten. ``` 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 ``` ### Ein Prompt für dein Projekt ``` Erstellen Sie einen fokussierten Case-Arbeitsbereich mit den fixierten SLDS-CSS-Vorlagen. Halten Sie Datensatzidentität, Kundenkontext, gespeicherten Status und Bearbeitungsentwurf voneinander getrennt. Verwenden Sie hier die exakte Feldstruktur, echte Token-Referenzen und den vollständigen Quellcode. Validieren Sie die Notiz, bevor Sie die Zusammenfassung ändern, behalten Sie lokale Aktivitäten nach dem Verwerfen bei und erwecken Sie nicht den Eindruck, dass eine Verbindung zu einem Salesforce-Backend besteht. ``` ## Quellen und Geltungsbereich des Salesforce Lightning-Designsystems OpenDesign-Leitfaden zum festgelegten SLDS-Paket CSS. Die Vorschau verwendet natives CSS mit originalem HTML und JavaScript, fiktiven Falldaten und lokalem Zustand. Sie lädt keine Lightning Web Components und stellt keine Verbindung zu Salesforce her. Das Upstream-Repository ist archiviert; berücksichtigen Sie für Produktionsarbeiten die aktuellen Richtlinien zur Salesforce-Plattform. - Offizielles Quell-Repository Archivierter Quellcode, Vorlagen und Paketverlauf. - Angepinnter Token-Export Exakte klassische Werte für Abstände, Schrift, Eckenradien und Farben. - Komponentenvorlagen Native Markup- und Modifikatormuster. ## Weiterführende Ressourcen zum Salesforce Lightning-Designsystem ### Samsung One UI Untersuche One UIs Ansichts- und Interaktionsstruktur, die Empfehlungen zu 24-dp-Rändern und die Anforderung zur Textskalierung auf 200 % anhand einer vollständigen, eigenständigen Vorschau der Leseeinstellungen mit dunkler Darstellung und expliziter Möglichkeit zum Zurücksetzen. ### SAP Fiori Verwende das Horizon-Theme von SAP Fiori über UI5 Web Components: echte Theme-Parameter, explizite Inhaltsdichte, semantische Wertzustände und eine Anordnung für eine Kaufanfrage mit lokaler Validierung. ### SEEK Braid Lernen Sie Braid anhand einer eigens entwickelten Jobsuche kennen: themenspezifische Variablen, vier echte Breakpoints, kontextbezogener Text, klar unterscheidbare Schaltflächenstile und ein kontrolliertes Feld, das die Validierung erklärt, statt die Aktion zu deaktivieren. - [Implementierungsreferenz](https://github.com/salesforce-ux/design-system) - [Quelle](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Quelle](https://github.com/salesforce-ux/design-system/tree/main/ui/components) - [Code-Referenz](https://github.com/salesforce-ux/design-system) - [Offizielles Quell-Repository Archivierter Quellcode, Vorlagen und Paketverlauf.](https://github.com/salesforce-ux/design-system) - [Angepinnter Token-Export Exakte klassische Werte für Abstände, Schrift, Eckenradien und Farben.](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Komponentenvorlagen Native Markup- und Modifikatormuster.](https://github.com/salesforce-ux/design-system/tree/main/ui/components)