uplifting-components-to-slds2

To migrate LWC styling to SLDS 2, run the SLDS linter with auto-fix to resolve straightforward violations, then manually replace deprecated tokens and hardcoded values with SLDS 2 styling hooks. This process ensures your components satisfy SLDS linter rules across all styling categories.

Fixing no-hardcoded-values-slds2 violations involves replacing hardcoded CSS values with SLDS 2 styling hooks. You must include required fallback values during replacement to preserve original rendering and ensure zero-regression behavior while satisfying SLDS linter rules.

Resolving slds/no-slds-class-overrides violations requires updating the matching HTML markup in your LWC or Aura components. You replace unsupported SLDS class overrides with appropriate SLDS 2 styling hooks to bring both the CSS and component markup into compliance.

Migrating to SLDS 2 styling hooks applies when updating both LWC and Aura component styles. The migration process converts deprecated tokens, hardcoded styling values, and unsupported class overrides across color, spacing, sizing, typography, border/radius, and shadow categories for both component types.

SLDS 2 styling hook replacements require fallback values to preserve original rendering and achieve zero-regression behavior. These fallbacks ensure the component maintains its exact visual output while transitioning away from deprecated SLDS 1 tokens and hardcoded styling values.

You can auto-fix straightforward deprecated LWC token replacements by running the SLDS linter, but remaining violations require manual fixes. You must manually choose correct SLDS 2 styling hooks for each family, including color, spacing, sizing, typography, borders/radius, and shadows, based on linter violation types.