mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
88 lines
2.9 KiB
Markdown
88 lines
2.9 KiB
Markdown
|
# 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 |
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- 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 |
|
||
|
|
|
||
|
|
```css
|
||
|
|
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](../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.
|
||
|
|
|
||
|
|
```css
|
||
|
|
/* 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:
|
||
|
|
|
||
|
|
```css
|
||
|
|
/* 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.
|