Salesforce Docs Portal

Salesforce Lightning Design System Component Blueprints Updates

Get more out of SLDS component blueprints and utilities with these enhancements and bug fixes.

Where: These changes apply to Salesforce Lightning Design System (SLDS) and Lightning Experience.

How: Improve your user interface (UI) with these recent updates to SLDS component designs.

  • To improve accessibility, we made a small color adjustment to the SLDS 1 theme Lightning Blue.
  • We added two new component designs for empty state and illustration. Both are implemented as Lightning base components, lightning-empty-state and lightning-illustration, and they’re available as beta features.
    • The empty state component is designed to show visuals that adapt to your brand, helpful messages, and guidance when there’s no content to display.
    • The illustration component is designed to add visuals that adapt to your brand, and enhance communication and engagement.
    • The lightning-illustration component currently can display the same illustrations as lightning-empty-state without descriptive text or buttons. We’re working on more illustrations to use with lightning-illustration.
    • Depending on the SLDS version in your org, both the illustration and empty state components switch between SLDS 1 and SLDS 2 automatically. Additionally, SLDS 2 illustration and empty state colors are optimized for dark mode.
      Note
      Note Empty state component, illustration component, and dark mode are a pilot or beta service that is subject to the Beta Services Terms at Agreements - Salesforce.com or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the Product Terms Directory. Use of these pilot or beta services is at the Customer's sole discretion.
  • To meet the Web Content Accessibility Guidelines (WCAG) 1.4.11 standard for non-text accessibility, we updated the root ::selection styling to use the system color keywords Highlight and HighlightText. This change allows the user agent, or web browser, to control the styling of highlighted and selected content.

See Also