uplifting-components-to-slds2

Uplifting Components to SLDS 2 migrates Lightning Web Components from SLDS 1 to SLDS 2 by running the SLDS linter and systematically fixing the violations it reports. It activates whenever users mention SLDS 2, an SLDS uplift or migration, linter violations, LWC token migration, class overrides, hardcoded CSS values that need styling-hook replacement, or specific rule names such as no-hardcoded-values, no-slds-class-overrides, lwc-to-slds-hooks, and no-deprecated-tokens-slds1. It covers all styling hook categories -- color, spacing, sizing, typography, borders, radius, and shadows -- where color hooks require the most judgment (context-dependent selection) and non-color hooks are mostly numbered scales with straightforward mappings.

The workflow always begins by running the linter with `npx @salesforce-ux/slds-linter@latest lint --fix .`, a mandatory non-optional step that auto-fixes simple violations across CSS and markup files (.html for LWC, .cmp for Aura) and reports the rest. The output is then analyzed for four violation types, each with its own fix approach and dedicated reference guide: no-hardcoded-values-slds2 (replace hardcoded values with an SLDS hook plus the original as a fallback), lwc-token-to-slds-hook (replace --lwc-* tokens with an SLDS 2 hook, keeping the LWC token as fallback), no-slds-class-overrides (create a component-prefixed class and add it to markup alongside the SLDS class), and no-deprecated-tokens-slds1 (replace legacy t()/token() syntax). The linter flags all hardcoded values, but layout values such as 100%, auto, 0, inherit, and none are skipped.

Hook selection follows a context-first rule. For any color property (color, background-color, background, fill, border-color) the color-hooks decision guide must be read before choosing, because the linter lists candidate hooks in no particular order and the first suggestion should not be picked blindly; non-color hooks are matched to a numbered scale via lookup tables. Class overrides require changes to both CSS and markup -- renaming the selector and adding the new class alongside the original SLDS class, never removing it -- which is the most commonly missed step. A feedback loop re-runs the linter until zero errors remain, and a validation checklist confirms outcomes such as no remaining .slds-* selectors, all hooks carrying fallback values, numbered spacing and typography hooks, and correct rendering in light/dark mode and density settings. Prerequisites include Node.js 14.x or higher and access to the component CSS and markup files.