# Salesforce Lightning — дизайн-система ## Предварительный просмотр интерфейса дизайн-системы Salesforce Lightning Измените приоритет или статус, проверьте примечание к изменению, сохраните запись в локальной истории действий, а затем отмените последующий черновик, не изменяя сохранённую запись. ## Справочник по дизайн-системе Salesforce Lightning Опубликованный нативный пакет @salesforce-ux/design-system 2.264.1 CSS и экспорт токенов ui-force. Это справочник по закреплённой классической спецификации, а не заявление о совместимости с более новым языком дизайна SLDS 2 или средой выполнения Lightning Web Components. Исторический исходный репозиторий находится в архиве. ### Поверхности записей и семантический текст | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | COLOR_BACKGROUND | rgb(243, 243, 243) | Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду. | | COLOR_BACKGROUND_ALT | rgb(255, 255, 255) | Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду. | | COLOR_TEXT_DEFAULT | rgb(3, 45, 96) | Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду. | | COLOR_TEXT_WEAK | rgb(116, 116, 116) | Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду. | | COLOR_BORDER | rgb(201, 201, 201) | Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду. | | COLOR_BORDER_ERROR | rgb(234, 0, 30) | Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду. | | COLOR_BORDER_SELECTION | rgb(1, 118, 211) | Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду. | | COLOR_BACKGROUND_BUTTON_BRAND | rgb(1, 118, 211) | Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду. | | COLOR_BACKGROUND_BUTTON_BRAND_HOVER | rgb(1, 68, 134) | Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду. | | COLOR_BACKGROUND_BUTTON_BRAND_ACTIVE | rgb(3, 45, 96) | Справочник по опубликованному пакету. Сохраняйте назначенную роль текста, поверхности или действия, а не применяйте один фирменный цвет повсюду. | ### Классическая шкала отступов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | SPACING_X_SMALL | 0.5rem | Классический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*. | | SPACING_XXX_SMALL | 0.125rem | Классический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*. | | SPACING_XX_SMALL | 0.25rem | Классический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*. | | SPACING_SMALL | 0.75rem | Классический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*. | | SPACING_MEDIUM | 1rem | Классический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*. | | SPACING_NONE | 0 | Классический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*. | | SPACING_X_LARGE | 2rem | Классический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*. | | SPACING_XX_LARGE | 3rem | Классический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*. | | SPACING_LARGE | 1.5rem | Классический экспорт SPACING_*. Это не отдельный компактный набор VAR_SPACING_*. | ### Шкала типографики | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | FONT_SIZE_1 | 0.625rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | | FONT_SIZE_2 | 0.75rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | | FONT_SIZE_3 | 0.8125rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | | FONT_SIZE_4 | 0.875rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | | FONT_SIZE_5 | 1rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | | FONT_SIZE_6 | 1.125rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | | FONT_SIZE_7 | 1.25rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | | FONT_SIZE_8 | 1.5rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | | FONT_SIZE_9 | 1.75rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | | FONT_SIZE_10 | 2rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | | FONT_SIZE_11 | 2.625rem | Выбирайте размер текста в соответствии с его ролью, сохраняя удобочитаемость примечаний к обращениям и подписей полей. | ### Радиус углов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | BORDER_RADIUS_SMALL | 0.125rem | Справочник по опубликованным радиусам. Круглый маркер статуса отличается от прямоугольного элемента формы. | | BORDER_RADIUS_MEDIUM | 0.25rem | Справочник по опубликованным радиусам. Круглый маркер статуса отличается от прямоугольного элемента формы. | | BORDER_RADIUS_LARGE | 0.5rem | Справочник по опубликованным радиусам. Круглый маркер статуса отличается от прямоугольного элемента формы. | | BORDER_RADIUS_CIRCLE | 50% | Справочник по опубликованным радиусам. Круглый маркер статуса отличается от прямоугольного элемента формы. | ### Анатомия нативной спецификации CSS | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | slds-page-header | Record context | Размещайте идентификатор и сводку обращения над формой редактирования. | | slds-card | Grouped content region | Для сведений об обращении и истории действий предусмотрены отдельные семантические области. | | slds-form-element | Label + control + help | Оборачивайте каждое редактируемое значение в отдельный логически связанный блок поля. | | slds-has-error | Invalid field modifier | Устанавливайте рядом с aria-invalid и конкретным сообщением об ошибке. | | slds-button_brand | Primary action | Сохраняйте локальное изменение; класс отвечает за оформление, а не за сохранение данных. | | slds-button_neutral | Secondary action | Отмените черновик и восстановите последние сохранённые локальные значения. | ## Полное руководство по дизайн-системе Salesforce Lightning Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Структура и контекст записи в дизайн-системе Salesforce Lightning ### Размещайте идентификатор записи над локальными задачами > В заголовке страницы указываются номер обращения, тема, учётная запись и владелец. Эти значения идентифицируют объект до того, как пользователь изменит какое-либо поле. Значок статуса отражает сводку сохранённой локальной записи, поэтому он меняется при нажатии кнопки сохранения, а не вслед за несохранённым значением в раскрывающемся списке. ### Отделяйте сведения от истории действий В более широкой области объединены контекст клиента и форма редактирования. Во вторичной области представлена упорядоченная история. Благодаря такому разделению пользователь может сопоставить запрошенную работу с уже зарегистрированными изменениями, не переходя на другой экран. В мобильной версии эти области располагаются вертикально в том же семантическом порядке. ## Семантические цвета и состояния в дизайн-системе Salesforce Lightning ### Рассматривайте названия токенов как обозначения ролей Экспорт ui-force различает основной текст, приглушённый текст, границы выделения и фоны кнопок фирменного цвета. В примере основной текст тёмный, метаданные оформлены сдержанно, а основная кнопка синяя. Красный цвет используется для недопустимого значения поля и поясняющего сообщения о том, как исправить ошибку, а не для всех несохранённых значений. ### Передавайте состояние не только цветом Приоритет и статус отображаются словами в сводке и новой записи истории действий. Состояние ошибки обозначено нативным модификатором slds-has-error, атрибутом aria-invalid и сообщением, связанным с текстовой областью. Подтверждение локального сохранения выводится в области статуса; одного зелёного акцента недостаточно, чтобы сообщить пользователю, что именно сохранено. ## Типографическая шкала и плотность записей в дизайн-системе Salesforce Lightning ### Выстраивайте иерархию без чрезмерно крупных заголовков Опубликованная нумерованная типографическая шкала начинается с 0.625rem и доходит до 2.625rem. Рабочему пространству обращения не требуется самый крупный размер заголовка во всех областях. Заголовок страницы по нативной спецификации идентифицирует запись, заголовки карточек разделяют области, а обычный текст содержит запрос клиента и примечание. ### Не обрезайте длинные темы записей В пользовательской компоновке заголовок страницы переносится на следующую строку, а не обрезается при узкой ширине. Метаданные также могут переноситься на дополнительные строки. Не уменьшайте весь текст из-за длинного названия учётной записи; прежде чем решать, где допустимо обрезание, проверьте макет на реалистичной длине тем и имён владельцев и убедитесь, что для обрезанного текста доступен полный вариант. ## Отступы и структура спецификации в дизайн-системе Salesforce Lightning ### Не смешивайте классические и переменные экспорты отступов В этом руководстве перечислены SPACING_* из ui-force. Отдельный экспорт var-spacing содержит другие, более компактные значения; VAR_SPACING_MEDIUM и SPACING_MEDIUM — не один и тот же параметр. Смешивание значений только из-за похожих названий может привести к неравномерному оформлению формы. Выберите нужную систему плотности и придерживайтесь её источника. ### Единообразно используйте обёртку поля Каждая подпись и элемент управления должны находиться внутри slds-form-element, а поле ввода и текст подсказки — внутри slds-form-element__control; текст подсказки размещается сразу за полем. Исходная сетка располагает рядом два связанных поля выбора, а на узких экранах размещает их друг под другом. Эта сетка отвечает за компоновку приложения, а структура поля взята из нативной спецификации. ## Поведение черновика и сохранённой записи в дизайн-системе Salesforce Lightning ### Храните сохранённую запись отдельно от элементов управления Скрипт хранит последние сохранённые значения приоритета и статуса в объекте record. Изменение элементов выбора влияет только на черновик. При нажатии кнопки сохранения значения копируются в этот объект, обновляется сводка и добавляется запись в историю действий. Благодаря этому действие «Отменить черновик» остаётся осмысленным и после нескольких успешных изменений. ### Не имитируйте успешное обращение к серверу В примере нет поиска по ID записи, модели разрешений, API или базы данных. Текст на кнопке и подтверждение явно указывают, что изменения локальные. Для интеграции с Salesforce в рабочей среде потребуются соответствующие API данных и ответы сервера, прежде чем можно будет обновить окончательный статус записи. Классы CSS не обеспечивают таких гарантий. ## Проверка полей и история действий в дизайн-системе Salesforce Lightning ### В примечании должно быть объяснение изменения Заданное правило требует не менее десяти символов после удаления пробелов по краям и ограничивает текстовую область 300 символами. Пустое или слишком короткое примечание блокирует любые изменения записи, отображает ошибку поля и переводит фокус на примечание. При редактировании прежняя ошибка сбрасывается, а при следующем нажатии кнопки сохранения текущее значение проверяется заново. 1. Отправьте форму без примечания и убедитесь, что значения в сохранённой сводке не изменились. 2. Введите полезное примечание, сохраните его и проверьте самую новую запись в истории действий. 3. Снова измените поля, отмените черновик и убедитесь, что восстановлены последние сохранённые значения. ### Добавляйте понятную запись об изменении После успешного локального обновления создаётся запись истории действий: сначала заголовок на основе сохранённых статуса и приоритета, затем точное примечание в виде текстового содержимого. Новая запись добавляется в начало, поэтому самое последнее изменение отображается первым. Примечание не интерпретируется как HTML, а статическая начальная запись истории располагается после локальных записей пользователя. ## Доступные формы и восстановление состояния в дизайн-системе Salesforce Lightning ### Используйте настоящие подписи и явные описания Для элементов select и textarea предусмотрены видимые подписи, связанные с ними через атрибуты for и id. Примечание связано с текстами подсказки и ошибки, а у маркера обязательного поля есть читаемое название. Основное действие и отмена оформлены кнопками с подходящими типами submit и button, что исключает случайную отправку формы при отмене черновика. ### После отмены возвращайте пользователя в предсказуемое место При отмене восстанавливаются сохранённые значения приоритета и статуса, очищаются примечание и ошибка поля, а фокус переводится на элемент управления приоритетом. История действий не удаляется, а запись не сбрасывается в исходное состояние. Это различие важно, если пользователь сначала сохраняет изменения, затем пробует внести другие и отменяет второй черновик. ## Интеграция CSS и область применения версии дизайн-системы Salesforce Lightning ### Установите опубликованный пакет стилей Полный исходный код импортирует закреплённый дистрибутив CSS и небольшую таблицу стилей приложения. Vite обрабатывает URL шрифтов и изображений из пакета. Далее за поведение записи отвечают HTML и JavaScript; это реализация спецификации CSS, а не обёртка над lightning-record-edit-form. - Нативный пакет CSS задаёт оформление полей, кнопок и карточек. - Исходный HTML задаёт структуру записи и подписи. - Исходный JavaScript отвечает за состояние черновика, проверку и локальную историю действий. ### Используйте архивный исходный код как справочник с указанной версией Официальный репозиторий GitHub находится в архиве, поэтому на этой странице указан фактически используемый пакет, а не утверждается, что это актуальная рекомендация с активной поддержкой. Совместимость компонентов платформы Salesforce, более новых рекомендаций по дизайн-системе и поддержки стилизующих хуков следует проверять для целевой среды. Явно указывайте выбранный пакет CSS и решения по интеграции с фреймворком. ## Примеры компонентов дизайн-системы Salesforce Lightning ### index.html — полное рабочее пространство обращения Сводка записи, форма и начальная история действий в семантическом 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.

``` Справочник по коду - Сохраните файл в корне проекта Vite. ### main.js — черновик, проверка и история действий Полное поведение приложения и импорт нативного 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(); }); ``` Справочник по коду - Сохраните как src/main.js. Все изменения остаются локальными. ### slds.css — адаптивная компоновка Только исходная сетка записи, оформление истории и мобильная компоновка. ``` [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; } } ``` Справочник по коду - Сохраните как src/slds.css; стили пакета подключаются отдельно. ## Настройка агента дизайн-системы Salesforce Lightning ### Отправная точка для реализации Пример нативного CSS с закреплённой версией, не развёртывание в организации Salesforce. При распространении включённых в пакет ресурсов сохраняйте уведомления о пакетах и ресурсах. ``` 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 ``` ### Запрос для вашего проекта ``` Создайте специализированное рабочее пространство обращения, используя закреплённые шаблоны SLDS CSS. Разделяйте идентификационные данные записи, контекст клиента, сохранённое состояние и черновик изменений. Используйте точную структуру полей, реальные ссылки на токены и полный исходный код, приведённый здесь. Проверяйте примечание до изменения сводки, сохраняйте локальную активность после отмены и не создавайте впечатление, что установлено соединение с серверной частью Salesforce. ``` ## Источники и область применения дизайн-системы Salesforce Lightning Руководство OpenDesign по закреплённому пакету SLDS CSS. В предварительном просмотре используются нативная разметка CSS, оригинальные HTML и JavaScript, вымышленные данные обращений и локальное состояние. Lightning Web Components не загружаются, соединение с Salesforce не устанавливается. Исходный репозиторий находится в архиве; для рабочих проектов изучите актуальные рекомендации платформы Salesforce. - Официальный исходный репозиторий Архивный исходный код, шаблоны и история пакета. - Экспорт токенов закреплённой версии Точные значения классических отступов, шрифтов, скруглений и цветов. - Шаблоны компонентов Шаблоны нативной разметки и модификаторов. ## Связанные материалы по дизайн-системе Salesforce Lightning ### Samsung One UI Изучите структуру просмотра и взаимодействия One UI, рекомендации по полям отступов 24dp и требование масштабирования текста на 200% на примере полноценного оригинального предпросмотра предпочтений чтения с тёмным оформлением и явным сбросом настроек для восстановления. ### SAP Fiori Используйте тему Horizon в SAP Fiori с UI5 Web Components: реальные параметры темы, явно заданная плотность контента, семантические состояния значений и сценарий оформления запроса на покупку с локальной проверкой. ### SEEK Braid Изучите Braid на примере оригинального сценария поиска работы: переменные в области действия темы, четыре реальные точки останова, контекстный текст, разные тона кнопок и управляемое поле, которое объясняет ошибку проверки вместо блокировки действия. - [Справочник по реализации](https://github.com/salesforce-ux/design-system) - [Источник](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Источник](https://github.com/salesforce-ux/design-system/tree/main/ui/components) - [Справочник по коду](https://github.com/salesforce-ux/design-system) - [Официальный исходный репозиторий Архивный исходный код, шаблоны и история пакета.](https://github.com/salesforce-ux/design-system) - [Экспорт токенов закреплённой версии Точные значения классических отступов, шрифтов, скруглений и цветов.](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Шаблоны компонентов Шаблоны нативной разметки и модификаторов.](https://github.com/salesforce-ux/design-system/tree/main/ui/components)