Skip to content

Commit 5c8eff6

Browse files
cdransfcdransf
committed
docs: additional migration refinements
1 parent 5d730aa commit 5c8eff6

4 files changed

Lines changed: 35 additions & 36 deletions

File tree

‎2nd-gen/packages/swc/components/asset/migration.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,10 @@ overriding colors or dimensions.
8585
The 2nd-gen component derives its colors from Spectrum 2 design tokens (e.g.,
8686
`gray-200`, `gray-25`, `gray-500`). These resolve automatically based on the active
8787
theme and color scheme — no manual override is needed for standard light/dark mode
88-
support. If you need to override asset colors beyond what the theme provides, target
89-
the component's `::part()` selectors or use a wrapping element with custom CSS properties
90-
and consult the Spectrum 2 token documentation for the token names in use.
88+
support. If you need to override asset colors beyond what the theme provides, use a
89+
wrapping element with custom CSS properties and consult the Spectrum 2 token
90+
documentation for the token names in use. `swc-asset` does not expose `::part()`
91+
selectors.
9192

9293
---
9394

‎2nd-gen/packages/swc/components/divider/migration.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,13 @@ Find and replace all instances of `sp-divider` with `swc-divider` in your templa
7474
All `--mod-divider-*` custom properties have been renamed to `--swc-divider-*`. Update
7575
any overrides in your stylesheets:
7676

77-
| Removed (1st-gen) | Replacement (2nd-gen) |
78-
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
79-
| `--mod-divider-background-color` | `--swc-divider-background-color` |
80-
| `--mod-divider-thickness` | `--swc-divider-thickness` |
81-
| `--mod-divider-vertical-align` | `--swc-divider-thickness` — in 1st-gen this controlled the rendered line size for vertical dividers; in 2nd-gen `--swc-divider-thickness` controls line width uniformly for both orientations |
82-
| `--mod-divider-vertical-height` | Not directly exposed |
83-
| `--mod-divider-vertical-margin` | Not directly exposed |
77+
| Removed (1st-gen) | Replacement (2nd-gen) |
78+
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
79+
| `--mod-divider-background-color` | `--swc-divider-background-color` |
80+
| `--mod-divider-thickness` | `--swc-divider-thickness` |
81+
| `--mod-divider-vertical-align` | Not directly exposed — in 1st-gen this controlled `align-self` for vertical dividers; in 2nd-gen `align-self: flex-start` is hardcoded |
82+
| `--mod-divider-vertical-height` | Not directly exposed |
83+
| `--mod-divider-vertical-margin` | Not directly exposed |
8484

8585
```css
8686
/* Before */

‎2nd-gen/packages/swc/components/progress-circle/migration.md‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -72,22 +72,20 @@ your templates and HTML.
7272

7373
### CSS custom properties
7474

75-
All `--mod-progress-circle-*` and `--spectrum-progress-circle-*` custom properties have
76-
been replaced with `--swc-progress-circle-*`. Update any overrides in your stylesheets:
77-
78-
| Removed (1st-gen) | Replacement (2nd-gen) |
79-
| --------------------------------------------- | ------------------------------------------ |
80-
| `--mod-progress-circle-size` | `--swc-progress-circle-size` |
81-
| `--mod-progress-circle-track-border-color` | `--swc-progress-circle-track-border-color` |
82-
| `--mod-progress-circle-fill-border-color` | `--swc-progress-circle-fill-border-color` |
83-
| `--mod-progress-circle-position` | Not directly exposed |
84-
| `--spectrum-progress-circle-size-small` | `--swc-progress-circle-size-small` |
85-
| `--spectrum-progress-circle-size-medium` | `--swc-progress-circle-size-medium` |
86-
| `--spectrum-progress-circle-size-large` | `--swc-progress-circle-size-large` |
87-
| `--spectrum-progress-circle-thickness` | `--swc-progress-circle-thickness` |
88-
| `--spectrum-progress-circle-thickness-small` | `--swc-progress-circle-thickness-small` |
89-
| `--spectrum-progress-circle-thickness-medium` | `--swc-progress-circle-thickness-medium` |
90-
| `--spectrum-progress-circle-thickness-large` | `--swc-progress-circle-thickness-large` |
75+
All `--mod-progress-circle-*` custom properties have been renamed to
76+
`--swc-progress-circle-*`. Update any overrides in your stylesheets:
77+
78+
| Removed (1st-gen) | Replacement (2nd-gen) |
79+
| ------------------------------------------ | ------------------------------------------ |
80+
| `--mod-progress-circle-size` | `--swc-progress-circle-size` |
81+
| `--mod-progress-circle-track-border-color` | `--swc-progress-circle-track-border-color` |
82+
| `--mod-progress-circle-fill-border-color` | `--swc-progress-circle-fill-border-color` |
83+
| `--mod-progress-circle-position` | Not directly exposed |
84+
85+
> **Note:** The 1st-gen component also used `--spectrum-progress-circle-*` variables
86+
> internally as design-token fallbacks (e.g. `var(--mod-progress-circle-size, var(--spectrum-progress-circle-size))`).
87+
> These were never consumer-facing API. If you were overriding them directly, use
88+
> the corresponding `--swc-progress-circle-*` property shown above instead.
9189
9290
```css
9391
/* Before */

‎2nd-gen/packages/swc/components/status-light/migration.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,16 +37,16 @@ import '@adobe/spectrum-wc/status-light';
3737

3838
## Quick reference
3939

40-
| What changed | Before (1st-gen) | After (2nd-gen) |
41-
| --------------------- | --------------------------------------- | ----------------------------------------------------------------- |
42-
| Tag name | `sp-status-light` | `swc-status-light` |
43-
| Package | `@spectrum-web-components/status-light` | `@adobe/spectrum-wc` |
44-
| `variant` attribute | 14 variants (incl. `accent`) | 14 variants (`accent` removed, 5 new colors added) |
45-
| `size` attribute | `s \| m \| l \| xl` | `s \| m \| l \| xl` — unchanged |
46-
| `disabled` attribute | Boolean | **Removed** — see [disabled removed](#disabled-attribute-removed) |
47-
| `accent` variant | Available | **Removed** — see [accent removed](#accent-variant-removed) |
48-
| New color variants | — | `pink`, `turquoise`, `brown`, `cinnamon`, `silver` |
49-
| CSS custom properties | `--mod-statuslight-*` | `--swc-statuslight-*` |
40+
| What changed | Before (1st-gen) | After (2nd-gen) |
41+
| --------------------- | ------------------------------------------------- | ------------------------------------------------------------------------- |
42+
| Tag name | `sp-status-light` | `swc-status-light` |
43+
| Package | `@spectrum-web-components/status-light` | `@adobe/spectrum-wc` |
44+
| `variant` attribute | 15 variants (6 semantic incl. `accent`, 9 colors) | 19 variants (`accent` removed, 5 new colors added; 5 semantic, 14 colors) |
45+
| `size` attribute | `s \| m \| l \| xl` | `s \| m \| l \| xl` — unchanged |
46+
| `disabled` attribute | Boolean | **Removed** — see [disabled removed](#disabled-attribute-removed) |
47+
| `accent` variant | Available | **Removed** — see [accent removed](#accent-variant-removed) |
48+
| New color variants | — | `pink`, `turquoise`, `brown`, `cinnamon`, `silver` |
49+
| CSS custom properties | `--mod-statuslight-*` | `--swc-statuslight-*` |
5050

5151
---
5252

0 commit comments

Comments
 (0)