Common Patterns

Frequently encountered patterns, class lists, and edge cases for SLDS 2 migration.

Deprecated SLDS 2 Classes

These classes are removed in SLDS 2. Remove them from markup (.html for LWC, .cmp for Aura):

Deprecated Class	Action
`slds-icon-utility-error`	Remove — icon component handles styling
`slds-icon-utility-*` (all variants)	Remove — use icon component variants instead

<!-- Before -->
<span class="slds-icon_container slds-icon-utility-error">

<!-- After -->
<span class="slds-icon_container">

Color Palette Fallbacks

When using palette hooks for data visualization or decorative color, include RGB fallbacks:

SLDS2 Hook	RGB Fallback	Common Use
`--slds-g-color-palette-red-40`	`rgb(181,54,45)`	Critical indicators, data viz
`--slds-g-color-palette-blue-50`	`rgb(0,112,210)`	Brand colors, primary actions
`--slds-g-color-palette-green-50`	`rgb(4,132,75)`	Positive indicators, data viz

color: var(--slds-g-color-palette-red-40, rgb(181,54,45));
background: var(--slds-g-color-palette-blue-50, rgb(0,112,210));

For transparency with palette hooks, use color-mix() — see Advanced Patterns in SKILL.md.

Tokens with No SLDS 2 Equivalent

Some legacy tokens have no direct SLDS 2 hook. Use --lwc-* or hardcoded values:

Token	Action	Replacement
`lineHeightButton`	Use `--lwc-*` directly	`var(--lwc-lineHeightButton)`
`durationInstantly`	Use `--lwc-*` directly	`var(--lwc-durationInstantly)`
`durationPromptly`	Use `--lwc-*` directly	`var(--lwc-durationPromptly)`
`durationSlowly`	Use `--lwc-*` directly	`var(--lwc-durationSlowly)`
`zIndexSticky`	Use hardcoded value	`9000`

Do not invent --slds-g-* hooks for these tokens. The linter will flag invented hooks with slds/no-slds-namespace-for-custom-hooks.

Custom Hook Namespace

When no SLDS 2 hook exists for an internal/custom value, use --lwc-* directly. Do not use the --slds-g-* namespace for custom purposes.

/* Bad — inventing SLDS namespace for internal values */
transition: var(--slds-g-duration-slowly, var(--lwc-durationSlowly));

/* Good — use --lwc-* when no official SLDS 2 equivalent */
transition: var(--lwc-durationSlowly);

Font-Family Post-Linter Cleanup

After the linter runs, it may add verbose font-stack fallbacks to font-family. For font-family only, trim to just the hook tokens — remove the hardcoded font stack:

/* Linter output — verbose */
font-family: var(--slds-g-font-family, var(--lwc-fontFamily, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));

/* Cleaned up — tokens only */
font-family: var(--slds-g-font-family, var(--lwc-fontFamily));

For all other properties, keep the linter's rgb/rem/px fallbacks.

2.9 KiB Raw Blame History