# Sistema de diseño de Salesforce Lightning ## Vista previa de la interfaz del sistema de diseño de Salesforce Lightning Cambia la prioridad o el estado, valida una nota de actualización, guarda una entrada de actividad local y descarta un borrador posterior sin modificar el registro guardado. ## Referencia de diseño del sistema de diseño de Salesforce Lightning CSS nativo publicado de @salesforce-ux/design-system 2.264.1 y exportación de tokens ui-force. Es una referencia fijada al plano clásico, no una afirmación de compatibilidad con el lenguaje de diseño SLDS 2 más reciente ni con un entorno de ejecución de Lightning Web Components. El repositorio histórico original está archivado. ### Superficies de registros y texto semántico | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | COLOR_BACKGROUND | rgb(243, 243, 243) | Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes. | | COLOR_BACKGROUND_ALT | rgb(255, 255, 255) | Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes. | | COLOR_TEXT_DEFAULT | rgb(3, 45, 96) | Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes. | | COLOR_TEXT_WEAK | rgb(116, 116, 116) | Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes. | | COLOR_BORDER | rgb(201, 201, 201) | Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes. | | COLOR_BORDER_ERROR | rgb(234, 0, 30) | Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes. | | COLOR_BORDER_SELECTION | rgb(1, 118, 211) | Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes. | | COLOR_BACKGROUND_BUTTON_BRAND | rgb(1, 118, 211) | Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes. | | COLOR_BACKGROUND_BUTTON_BRAND_HOVER | rgb(1, 68, 134) | Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes. | | COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE | rgb(3, 45, 96) | Referencia del paquete publicado. Conserva la función indicada para el texto, la superficie o la acción en lugar de aplicar un único color de marca en todas partes. | ### Escala de espaciado clásica | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | SPACING_X_SMALL | 0.5rem | Exportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente. | | SPACING_XXX_SMALL | 0.125rem | Exportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente. | | SPACING_XX_SMALL | 0.25rem | Exportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente. | | SPACING_SMALL | 0.75rem | Exportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente. | | SPACING_MEDIUM | 1rem | Exportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente. | | SPACING_NONE | 0 | Exportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente. | | SPACING_X_LARGE | 2rem | Exportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente. | | SPACING_XX_LARGE | 3rem | Exportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente. | | SPACING_LARGE | 1.5rem | Exportación clásica SPACING_*. No es el conjunto VAR_SPACING_* compacto independiente. | ### Escala tipográfica | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | FONT_SIZE_1 | 0.625rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | | FONT_SIZE_2 | 0.75rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | | FONT_SIZE_3 | 0.8125rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | | FONT_SIZE_4 | 0.875rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | | FONT_SIZE_5 | 1rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | | FONT_SIZE_6 | 1.125rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | | FONT_SIZE_7 | 1.25rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | | FONT_SIZE_8 | 1.5rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | | FONT_SIZE_9 | 1.75rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | | FONT_SIZE_10 | 2rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | | FONT_SIZE_11 | 2.625rem | Elige el tamaño del texto según su función y conserva la legibilidad de las notas del caso y las etiquetas de los campos. | ### Radio de esquina | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | BORDER_RADIUS_SMALL | 0.125rem | Referencia de radios publicada. Un indicador de estado circular no es lo mismo que un control de formulario rectangular. | | BORDER_RADIUS_MEDIUM | 0.25rem | Referencia de radios publicada. Un indicador de estado circular no es lo mismo que un control de formulario rectangular. | | BORDER_RADIUS_LARGE | 0.5rem | Referencia de radios publicada. Un indicador de estado circular no es lo mismo que un control de formulario rectangular. | | BORDER_RADIUS_CIRCLE | 50% | Referencia de radios publicada. Un indicador de estado circular no es lo mismo que un control de formulario rectangular. | ### Estructura de referencia nativa de CSS | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | slds-page-header | Record context | Mantén la identidad y el resumen del caso por encima del formulario de edición. | | slds-card | Grouped content region | Los detalles y la actividad del caso ocupan regiones semánticas separadas. | | slds-form-element | Label + control + help | Agrupa cada valor editable en un campo coherente. | | slds-has-error | Invalid field modifier | Configúralo junto con aria-invalid y un mensaje de error específico. | | slds-button_brand | Primary action | Guarda la actualización local; la clase aplica estilos, no persiste los datos. | | slds-button_neutral | Secondary action | Descarta el borrador y restaura los últimos valores locales guardados. | ## Guía completa del sistema de diseño de Salesforce Lightning Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Diseño y contexto de registros del sistema de diseño de Salesforce Lightning ### Mantén la identidad del registro por encima de las tareas locales > El encabezado de la página muestra el número del caso, el asunto, la cuenta y el responsable. Estos valores identifican el objeto antes de que el usuario modifique un campo. La insignia de estado resume el registro local guardado, por lo que cambia al guardar y no sigue el valor de una selección sin confirmar. ### Separa los detalles de la actividad La región más amplia combina el contexto del cliente y el formulario de edición. La región secundaria contiene un historial ordenado. Esta separación permite comparar el trabajo solicitado con los cambios ya registrados sin tener que ir a otra pantalla. En el diseño para móviles, estas regiones se apilan manteniendo el mismo orden semántico. ## Colores semánticos y estados del sistema de diseño de Salesforce Lightning ### Interpreta los nombres de los tokens como funciones La exportación de ui-force distingue entre el texto predeterminado, el texto de menor énfasis, los bordes de selección y los fondos de botones de marca. El ejemplo mantiene oscuro el texto principal, discreta la información secundaria y azul la acción principal. El rojo se reserva para el campo no válido y su mensaje de recuperación; no se aplica a todos los valores sin guardar. ### Comunica el estado de más formas que solo con el color La prioridad y el estado aparecen como palabras en el resumen y en la nueva entrada de actividad. El estado de error combina el modificador nativo slds-has-error con aria-invalid y un mensaje asociado al área de texto. La confirmación local se muestra por escrito en una región de estado; un acento verde por sí solo no indicaría al usuario qué se ha guardado. ## Escala tipográfica y densidad de registros del sistema de diseño de Salesforce Lightning ### Crea jerarquía sin usar encabezados desmesurados La escala tipográfica numerada publicada empieza en 0.625rem y llega hasta 2.625rem. Un espacio de trabajo de casos no necesita el tamaño de visualización más grande en todas las áreas. El título de encabezado de página nativo identifica el registro, los encabezados de las tarjetas distinguen las secciones y el texto normal del cuerpo presenta la solicitud y la nota del cliente. ### Mantén intactos los asuntos largos de los registros El diseño personalizado permite que el título de la página ocupe varias líneas, en lugar de truncar el asunto en un ancho reducido. Los metadatos también pueden distribuirse en varias líneas. No reduzcas todo el texto para compensar un nombre de cuenta largo; prueba asuntos y nombres de responsables de longitudes realistas antes de decidir dónde el truncamiento cuenta con una alternativa accesible que muestre el texto completo. ## Sistema de diseño Salesforce Lightning: espaciado y estructura del blueprint ### No combines las exportaciones de espaciado clásico y variable Esta guía enumera SPACING_* de ui-force. La exportación var-spacing independiente contiene valores compactos diferentes; VAR_SPACING_MEDIUM no corresponde a la misma referencia que SPACING_MEDIUM. Mezclar valores basándose únicamente en la similitud de sus nombres puede hacer que un formulario se vea irregular. Elige el sistema de densidad que quieras usar y conserva su origen. ### Usa el contenedor de campo de forma coherente Cada etiqueta y control debe estar dentro de slds-form-element, con slds-form-element__control alrededor del campo de entrada y el texto de ayuda justo después. La cuadrícula original dispone dos campos de selección relacionados uno al lado del otro y los apila en pantallas estrechas. Esa cuadrícula corresponde al diseño de la aplicación; la estructura del campo proviene del blueprint nativo. ## Sistema de diseño Salesforce Lightning: borradores y comportamiento de los registros guardados ### Mantén el registro guardado separado de los controles El script conserva la última prioridad y el último estado guardados en un objeto de registro. Editar las listas de selección solo modifica el borrador. Al guardar, copia los valores en ese objeto, actualiza el resumen y añade una entrada de actividad. Así, Descartar borrador sigue teniendo sentido incluso después de varios cambios guardados correctamente. ### No inventes confirmaciones del backend El ejemplo no incluye búsqueda por ID de registro, un modelo de permisos, API ni una base de datos. El botón y el mensaje de confirmación indican explícitamente que la operación es local. Una integración de producción con Salesforce necesitaría las API de datos adecuadas y respuestas del servidor antes de actualizar de forma definitiva el estado de un registro. Las clases CSS no pueden ofrecer esas garantías. ## Sistema de diseño Salesforce Lightning: validación de campos y actividad ### Haz que la nota explique el cambio La regla definida exige diez caracteres, sin contar los espacios al principio y al final, y limita el área de texto a 300 caracteres. Si la nota está vacía o es demasiado corta, se impiden todos los cambios del registro, se muestra el error del campo y el foco pasa a la nota. Al editar, se borra el error obsoleto; al pulsar Guardar, se vuelve a validar el valor actual. 1. Envía el formulario sin una nota y comprueba que los valores guardados del resumen no cambien. 2. Escribe una nota útil, guarda e inspecciona la entrada de actividad más reciente. 3. Vuelve a cambiar los campos, descarta el borrador y confirma que se restauren los últimos valores guardados. ### Añade una entrada de cambio fácil de leer Una actualización local correcta crea un título de actividad a partir del estado y la prioridad guardados, seguido de la nota exacta como contenido de texto. La entrada se inserta al principio para que el cambio más reciente aparezca primero. La nota nunca se interpreta como HTML, y la actividad inicial estática permanece debajo de las entradas locales del usuario. ## Sistema de diseño Salesforce Lightning: formularios accesibles y recuperación ### Usa etiquetas reales y descripciones explícitas Las listas de selección y el área de texto tienen etiquetas visibles vinculadas mediante for e id. La nota hace referencia al texto de ayuda y al mensaje de error, y el título del indicador de campo obligatorio es legible. Las acciones principales y para descartar son botones con los tipos submit y button adecuados, lo que evita que se envíe el formulario por accidente al descartar un borrador. ### Vuelve a un lugar predecible al descartar Descartar restaura la prioridad y el estado guardados, borra la nota y el error del campo, y pone el foco en el control de prioridad. No elimina el historial de actividad ni restablece el registro a su estado inicial. Esta distinción importa cuando un usuario guarda una vez, prueba otro cambio y luego cancela ese segundo borrador. ## Sistema de diseño Salesforce Lightning: integración con CSS y alcance de la versión ### Instala el paquete de estilos publicado El código fuente completo importa la distribución fijada de CSS y una pequeña hoja de estilos de la aplicación. Vite resuelve las URL de fuentes e imágenes del paquete. Después, HTML y JavaScript proporcionan el comportamiento del registro; se trata de una implementación basada en blueprints de CSS, no de un contenedor para lightning-record-edit-form. - El paquete nativo CSS proporciona la apariencia de los campos, botones y tarjetas. - El HTML original proporciona la estructura y las etiquetas del registro. - El JavaScript original gestiona el estado del borrador, la validación y la actividad local. ### Considera el código fuente archivado como una referencia versionada El repositorio oficial de GitHub está archivado, por lo que esta página identifica el paquete utilizado realmente en vez de presentarlo como la recomendación más reciente y en mantenimiento activo. Comprueba los componentes de la plataforma Salesforce, las directrices más recientes del sistema de diseño y la compatibilidad con hooks de estilos para el entorno de destino. Deja explícitas las decisiones sobre el paquete CSS elegido y la integración con el framework. ## Sistema de diseño Salesforce Lightning: ejemplos de componentes ### index.html — espacio de trabajo de casos completo El resumen del registro, el formulario y la actividad inicial en HTML semántico. ``` 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.

``` Referencia de código - Guárdalo en la raíz del proyecto Vite. ### main.js — borrador, validación y actividad El comportamiento completo de la aplicación y la importación 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(); }); ``` Referencia de código - Guárdalo como src/main.js. Todas las actualizaciones son locales. ### slds.css — composición adaptable Solo la cuadrícula del registro original, la decoración del historial y el diseño para móviles. ``` [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; } } ``` Referencia de código - Guárdalo como src/slds.css; los estilos del paquete se mantienen separados. ## Sistema de diseño Salesforce Lightning: configuración del agente de IA ### Punto de partida para la implementación Ejemplo nativo de CSS con versión fijada; no es una implementación en una organización de Salesforce. Conserva los avisos sobre los paquetes y recursos al redistribuir los recursos incluidos. ``` 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 ``` ### Una instrucción para tu proyecto ``` Crea un espacio de trabajo de casos enfocado usando los blueprints de SLDS CSS con versión fijada. Mantén separados la identidad del registro, el contexto del cliente, el estado guardado y el borrador en edición. Usa la estructura exacta de los campos, referencias reales a los tokens y el código fuente completo que se incluye aquí. Valida la nota antes de cambiar el resumen, conserva la actividad local al descartar el borrador y no des a entender que hay una conexión con un backend de Salesforce. ``` ## Sistema de diseño Salesforce Lightning: fuentes y alcance Guía de OpenDesign para el paquete SLDS CSS fijado. La vista previa usa CSS nativo con HTML y JavaScript originales, datos de casos ficticios y estado local. No carga Lightning Web Components ni se conecta a Salesforce. El repositorio original está archivado; para el trabajo en producción, consulta las directrices actuales de la plataforma Salesforce. - Repositorio oficial del código fuente Código fuente archivado, planos y versiones del paquete. - Exportación de tokens fijada Valores clásicos exactos de espaciado, tipografía, radio y color. - Planos de componentes Patrones de marcado nativo y modificadores. ## Recursos relacionados con el sistema de diseño Salesforce Lightning ### Samsung One UI Descubre la estructura de visualización e interacción de One UI, las pautas de márgenes de 24dp y el requisito de escalado de texto al 200% mediante una vista previa original y completa de las preferencias de lectura, con apariencia oscura y una opción explícita para restaurar la configuración. ### SAP Fiori Usa el tema Horizon de SAP Fiori mediante UI5 Web Components: parámetros de tema reales, densidad de contenido explícita, estados de valor semánticos y una composición de solicitud de compra con validación local. ### SEEK Braid Conoce Braid mediante una composición original de búsqueda de empleo: variables limitadas al tema, cuatro puntos de ruptura reales, texto contextual, tonos de botón diferenciados y un campo controlado que explica la validación en lugar de desactivar la acción. - [Referencia de implementación](https://github.com/salesforce-ux/design-system) - [Fuente](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Fuente](https://github.com/salesforce-ux/design-system/tree/main/ui/components) - [Referencia de código](https://github.com/salesforce-ux/design-system) - [Repositorio oficial del código fuente Código fuente archivado, planos y versiones del paquete.](https://github.com/salesforce-ux/design-system) - [Exportación de tokens fijada Valores clásicos exactos de espaciado, tipografía, radio y color.](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Planos de componentes Patrones de marcado nativo y modificadores.](https://github.com/salesforce-ux/design-system/tree/main/ui/components)