Interpret Your Results

Use SLDS Linter to find UI violations if you're working on SLDS 1, SLDS 2 or transitioning from SLDS 1 to SLDS 2. SARIF reports generated by SLDS Linter list all the identified UI violations for currently enabled rules and, when available, include recommendations. Autofix your code or use the recommendations to manually make changes. Open your code in VS Code and review the messages displayed in the SARIF report against the code, to determine which values must be updated or removed.

Here’s ‌the good news! You don’t have to fix all the identified violations to align with SLDS 2 guidelines. Analyze these four types of errors to understand the impact of the identified issues and how to fix them.

Error TypeRecommended ActionEffort Required to FixExamples
Design tokens
  • Replace with SLDS styling hooks and retain the design tokens as fallback values.
  • Possible to autofix. If your code has implemented design tokens correctly, SLDS Linter autofixes all these issues.
Little to no manual effortExisting code:

/* Using --slds-g-color-border-1 as fallback value for --lwc-color-background-1 is not supported. */ .example { color: var(--lwc-color-background-1, var(--slds-g-color-border-1)); }

Recommended code:

.example { color: var(--slds-g-color-border-1, var(--lwc-color-background-1)); }

The --lwc-color-background-1 token is replaced with the --slds-g-color-border-1 styling hook. The --lwc token is mentioned as the fallback value.
Unsupported classes
  • Investigate where unsupported classes are used in your code and remove them, if possible.
  • Not possible to autofix.
Medium effortExisting code:

<span class="slds-icon_left"> </span>

The slds-icon_left class is deprecated in SLDS 2 and must be updated to a class that is supported in SLDS 2.
Hard-coded values
  • Replace with styling hooks and retain the hard-coded values as fallback values.
  • Not possible to autofix most of these violations because SLDS Linter can’t automatically determine the context in which a hard-coded value is used.
  • Find the correct styling hook to represent the hard-coded value and resolve the issue. Use the Global Styling Hooks Index on the SLDS 2 site to find the correct match.
  • To narrow your scope for an SLDS 2 transition, if you have limited bandwidth to manually uplift your code, first focus on hard-coded color values. When you have time, focus on uplifting other hard-coded values, like padding, spacing, and typography. Color values impact your UI the most, especially when personalization features like dark mode are used.
    Tip:
    The most critical color values to resolve are your UI’s surface color and the color of any text that appears on top of the surface.
    To find the best styling hook match, first look at the semantic styling hooks, then look at the system palette, and finally the color palette if needed.
    For more information, see the Color section on the SLDS 2 site.
High effortExisting code:

.THIS .container { color: #5c5c5c; border-color: #5c5c5c; }

Recommended code:

.THIS .container { color: var(--slds-g-color-on-surface-1,#5c5c5c); border-color:var(--slds-g-color-border-2,#5c5c5c); }

In this example, the #5c5c5c hard-coded value for the color property is replaced with an on-surface semantic styling hook. The #5c5c5c hard-coded value for the border-color property is replaced with a color-border semantic styling hook
Unsupported hooks
  • Not possible to autofix.
  • Analyze the occurrences of unsupported hooks, but don’t remove them. It could impact how your UI behaves with an SLDS 1 implementation or in backwards compatibility with SLDS 1 from an SLDS 2 implementation.
    Important:
    If you're an Independent Software Vendor (ISV) and work with customers who aren't on SLDS 2, don’t modify unsupported hooks.
Little to no effortExisting Code:

.THIS .action-link { color: var(--slds-g-link-color) }

Here the --slds-g-link-color styling hook is deprecated.

Remember that SLDS Linter results will change as your code changes. So, regularly test your code in a sandbox or User Acceptance Testing (UAT) environment and handle the identified issues using the information in this guide and our resources on the SLDS 2 site.

See Also