j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
Interpret Your Results
To make recommendations, SLDS Validator scans your code for specific types of violations. The recommendations made depend on your codebase and whether you’re using SLDS 1 or SLDS 2. Read this guide to understand the recommendations and options SLDS Validator provides.
What Is SLDS?
Salesforce Lightning Design System (SLDS) is a framework that helps developers and designers build custom applications and components for the Salesforce Lightning Platform. SLDS provides a set of guidelines, CSS, and JavaScript to create user interfaces that are accessible, mobile-first, and responsive.
What Is SLDS 2 (Beta)?
SLDS 2 is the latest version of SLDS. SLDS 2 has a new architecture that prioritizes CSS custom properties. Use SLDS 2 to make Salesforce your own with its AI-ready design system, configurable UI components, and an advanced theming engine. Certain types of design code are deprecated in SLDS 2. Read more on www.lightningdesignsystem.com.
—lwc CSS Custom Property Recommendations
Migrate your –lwc custom properties to new global semantic styling hooks. If you don’t see a recommendation, there’s no matching global styling hook and the –lwc custom property is deprecated in SLDS 2.
-lwc Example
color: var(—lwc-brandPrimary);
Aura Design Token Recommendations
Aura design tokens are deprecated styling APIs that are only available in Aura. Aura design tokens don’t exist in SLDS 2. Replace your Aura design tokens with global styling hooks.
Aura Example
.THIS {
color: t(brandPrimary);
background: token(brandBackgroundPrimary);
}
–sds Styling Hook Recommendations
--sds styling hooks started as a styling API and still exists as an internal styling API within SDS primitives. Replace –sds styling hooks with an equivalent –slds styling hook. Read about any exceptions in the SLDS Validator recommendation message.
-sds Example
.THIS {
--sds-
color: --sds-
}
BEM Recommendations
Block, element, and modifier (BEM) is a well-known method of naming components. BEM is also a nomenclature that SLDS no longer uses. If your code is still uses a BEM-named component, you see an SLDS Validator recommendation with a replacement value.
j