chore: update dependency @spectrum-css/table to v8 #5336

renovate · 2025-04-04T17:41:18Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@spectrum-css/table (source)	`7.0.0-s2-foundations.17` -> `8.1.0`

Release Notes

adobe/spectrum-css (@spectrum-css/table)

Fixes a bug in the content of the dist/index-theme.css file.

Expected index-theme.css to include the component selectors with component-level custom properties mapped to the --system prefixed ones in order to allow a component to support various contexts.

Expected output example for the index-theme.css:

.spectrum-ActionButton {
  --spectrum-actionbutton-background-color-default: var(--system-action-button-background-color-default);
  --spectrum-actionbutton-background-color-hover: var(--system-action-button-background-color-hover);

Updated dependencies [68e0057]:
- @spectrum-css/button @14.0.1
- @spectrum-css/checkbox @10.0.1
- @spectrum-css/icon @9.0.1
- @spectrum-css/thumbnail @8.0.1

`v8.0.0`

Compare Source

Major Changes

📝 #2786 6c19fcf Thanks @pfulton!

🛑 Breaking change

This major update creates a bridge between the Spectrum 1 (S1) and Spectrum 2 (S2) designs, dubbed "Spectrum 2 Foundations". These do NOT reflect a fully migrated S2 component. This approach allows consumers to swap the appearance of their components between S1, Express, and S2 by leveraging a "system" layer that remaps the necessary component-level tokens to the appropriate token dataset.

For these components to appear S2, you must load the assets with the @spectrum-css/tokens at v16 or higher.

For S1 or Express, load assets with the @spectrum-css/tokens at v14.x or v15.x.

If you are looking to implement a fully S2 design, please explore the next tag releases instead of using this foundations release. This release is used in Spectrum Web Components 1.x.

Deprecations

The metadata folder containing the mods.md and metadata.json assets has been removed from source. To find information about the components including what selectors, modifiers, and passthroughs are used, please see the dist/metadata.json asset shipped with every component containing CSS.

The index-vars.css asset has been removed in this release as it was previously deprecated and is no longer maintained. Please use the index.css or index-base.css

File usage

If you are rendering components and need only the S2 Foundations styles, you can make use of the index.css asset which contains all the base styles plus the system mappings for S2 Foundations.

If you are using this version to publish only an S1 or Express component, you can use the index-base.css plus the desired themes/(spectrum|express).css file.

To render a component that can be easily swapped between the S2 Foundations, S1, or Express contexts, load index-base.css with the index-theme.css file and leverage the appropriate context classes (.spectrum--legacy for S1 and .spectrum--express for Express).

Patch Changes

Updated dependencies [6c19fcf, 3d08cea, 6c19fcf]:
- @spectrum-css/tokens @16.0.0
- @spectrum-css/thumbnail @8.0.0
- @spectrum-css/checkbox @10.0.0
- @spectrum-css/button @14.0.0
- @spectrum-css/icon @9.0.0

`v7.0.1`

Compare Source

Patch Changes

📝 #3522 7a47c22 Thanks @castastrophe!

Peer dependency for @spectrum-css/tokens updated to include v15 as well as v14.
Updated dependencies [7a47c22, 7a47c22]:
- @spectrum-css/tokens @15.2.0
- @spectrum-css/thumbnail @7.0.1
- @spectrum-css/checkbox @9.3.1
- @spectrum-css/button @13.6.1
- @spectrum-css/icon @8.0.1

`v7.0.0`

Compare Source

Major Changes

📝 #3502 562396e Thanks @castastrophe!

Remove empty theme references to reduce complexity for components that don't need to define any mappings. This involves removing the source themes directories with the empty spectrum.css and express.com files as well as removing the following empty or unnecessary exports:
- index-base.css
- index-theme.css
- themes/spectrum.css
- themes/express.css

Minor Changes

📝 #3359 c8194b0 Thanks @cdransf!

This resolves our remaining stylelint issues around undefined tokens, rule order, unused values and color syntax.
- Updates invalid color syntax from rgba(N, N, N, N) to rgba(N N N / N).
- In cases of duplicate properties, preserves the property that would be applied given current code structure.
- Updates misnamed tokens to use valid tokens (table/index.css).

Patch Changes

Updated dependencies [c8194b0, 562396e, 562396e]:
- @spectrum-css/checkbox @9.3.0
- @spectrum-css/button @13.6.0
- @spectrum-css/tokens @15.1.0
- @spectrum-css/thumbnail @7.0.0
- @spectrum-css/icon @8.0.0

`v7.0.0-s2-foundations.18`

Compare Source

Major Changes

#2786 f6ad55e Thanks @pfulton! - feat: s2 foundations non-gray-800 colors update

Property name	Context	Old value	Updated value
`--spectrum-blue-800`	dark	rgb(69, 110, 254)	rgb(64, 105, 253)
`--spectrum-red-800`	dark	rgb(230, 54, 35)	rgb(223, 52, 34)
`--spectrum-orange-800`	dark	rgb(205, 86, 0)	rgb(199, 82, 0)
`--spectrum-yellow-800`	dark	rgb(169, 110, 0)	rgb(164, 106, 0)
`--spectrum-chartreuse-800`	dark	rgb(109, 131, 0)	rgb(106, 127, 0)
`--spectrum-celery-800`	dark	rgb(69, 138, 19)	rgb(66, 134, 18)
`--spectrum-green-800`	dark	rgb(6, 140, 82)	rgb(6, 136, 80)
`--spectrum-seafoam-800`	dark	rgb(8, 138, 116)	rgb(8, 134, 112)
`--spectrum-cyan-800`	dark	rgb(15, 128, 194)	rgb(13, 125, 186)
`--spectrum-indigo-800`	dark	rgb(119, 97, 252)	rgb(116, 91, 252)
`--spectrum-purple-800`	dark	rgb(161, 84, 229)	rgb(157, 78, 228)
`--spectrum-fuchsia-800`	dark	rgb(192, 64, 212)	rgb(186, 60, 206)
`--spectrum-magenta-800`	dark	rgb(231, 41, 105)	rgb(224, 38, 101)
`--spectrum-pink-800`	dark	rgb(220, 47, 156)	rgb(213, 45, 151)
`--spectrum-turqoise-800`	dark	rgb(9, 135, 147)	rgb(9, 131, 142)
`--spectrum-brown-800`	dark	rgb(148, 118, 73)	rgb(143, 114, 69)
`--spectrum-silver-800`	dark	rgb(123, 123, 123)	rgb(118, 118, 118)
`--spectrum-cinnamon-800`	dark	rgb(179, 103, 64)	rgb(176, 98, 59)

Patch Changes

Updated dependencies [f6ad55e]:
- @spectrum-css/tokens @15.0.0-s2-foundations.29
- @spectrum-css/thumbnail @7.0.0-s2-foundations.18
- @spectrum-css/checkbox @10.0.0-s2-foundations.20
- @spectrum-css/button @14.0.0-s2-foundations.19
- @spectrum-css/icon @8.0.0-s2-foundations.18

Configuration

📅 Schedule: Branch creation - "after 12pm on thursday" in timezone America/Los_Angeles, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

changeset-bot · 2025-04-04T17:41:22Z

⚠️ No Changeset found

Latest commit: 6e0f9ff

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2025-04-04T17:43:34Z

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

github-actions · 2025-04-04T17:46:20Z

Tachometer results

Currently, no packages are changed by this PR...

renovate · 2025-04-05T00:36:38Z

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠️ Warning: custom changes will be lost.

rubencarvalho · 2025-04-10T11:28:13Z

packages/table/src/spectrum-table-body.css

    position: relative;
 }

 :host([drop-target]) {
-    --spectrum-table-border-color: transparent;
+    --mod-table-border-color: transparent;


We shouldn't override the mod property here, it might break consumers?

It's specific to the drop-target context which doesn't support a border color --mod override. We wouldn't want the --mod-table-border-color to show up no matter what value was set in the drop-target context because it would make the interface look broken. So the tldr; here is that this is a design direction not to allow the border-color show at all in this state.

rubencarvalho · 2025-04-10T11:28:34Z

.circleci/config.yml

@@ -14,7 +14,7 @@ parameters:
    # 3. Commit this change to the PR branch where the changes exist.
    current_golden_images_hash:
        type: string
-        default: 2b6914161171d5a49857cebd254a9fbca3ed0ca4
+        default: ed603e48e9dbd4f54ad74266ee543e66ce96d7b5


Can we revert the hash so we can review the changes?

No problem, just pushed that up. We reviewed the diffs in CSS and validated those updates were as we'd expect and with no noticeable impact to customers.

castastrophe · 2025-04-10T15:52:20Z

packages/table/src/spectrum-table-row.css

@@ -125,7 +125,7 @@ governing permissions and limitations under the License.
 }

 :host([drop-target]) {
-    --spectrum-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent);
+    --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent);


@rubencarvalho You can see that same guidance reflected here - the highcontrast override is present for a11y use but no new --mod is introduced because it must be transparent.

castastrophe · 2025-04-11T18:34:24Z

The only visual diff introduced here has to do with the background color of the WHCM. Digging around to see if that's an improvement for high-contrast or a regression:

nikkimk · 2025-04-11T18:40:40Z

The only visual diff introduced here has to do with the background color of the WHCM. Digging around to see if that's an improvement for high-contrast or a regression:

In high contrast mode, both main and the PR are resolving to --system-table-row-background-color but the PR sets that value to var(---spectrum-gray-25) where main sets it to var(--spectrum-gray-50), which makes sense as a change in the VRT.

nikkimk · 2025-04-11T19:00:37Z

packages/table/src/spectrum-table.css

 }

 :host([density='compact'][size='s']) {
-    --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-small-compact));


This makes sense to me:

From @castastrophe

Now with this update, the more explicit mods intercept using the default mod so the default mod will no longer apply to specific variants
Like if in a compact state, we’d expect compact background color mod to be used, not default background color
Both mods already existed though so nothing new introduced

nikkimk

Looks good to me.

renovate bot added the Spectrum CSS label Apr 4, 2025

renovate bot requested a review from a team as a code owner April 4, 2025 17:41

renovate bot force-pushed the renovate/spectrum-css-table-8.x branch 2 times, most recently from 8f60c57 to 704cc05 Compare April 4, 2025 22:11

castastrophe self-assigned this Apr 5, 2025

castastrophe added Component: Table ready-for-review labels Apr 5, 2025

castastrophe force-pushed the renovate/spectrum-css-table-8.x branch from ed603e4 to d537b6d Compare April 5, 2025 02:51

rubencarvalho reviewed Apr 10, 2025

View reviewed changes

castastrophe force-pushed the renovate/spectrum-css-table-8.x branch from d537b6d to de5a511 Compare April 10, 2025 15:49

castastrophe reviewed Apr 10, 2025

View reviewed changes

castastrophe force-pushed the renovate/spectrum-css-table-8.x branch from de5a511 to 0138cc6 Compare April 10, 2025 22:56

renovate bot and others added 2 commits April 11, 2025 13:55

chore: update dependency @spectrum-css/table to v8

aa2d446

fix(table,styles): use latest CSS

6e0f9ff

castastrophe force-pushed the renovate/spectrum-css-table-8.x branch from 0138cc6 to 6e0f9ff Compare April 11, 2025 17:55

castastrophe requested a review from nikkimk April 11, 2025 18:33

nikkimk reviewed Apr 11, 2025

View reviewed changes

nikkimk approved these changes Apr 11, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: update dependency @spectrum-css/table to v8 #5336

chore: update dependency @spectrum-css/table to v8 #5336

renovate bot commented Apr 4, 2025

changeset-bot bot commented Apr 4, 2025 •

edited

Loading

github-actions bot commented Apr 4, 2025 •

edited

Loading

github-actions bot commented Apr 4, 2025

renovate bot commented Apr 5, 2025

rubencarvalho Apr 10, 2025

castastrophe Apr 10, 2025

rubencarvalho Apr 10, 2025

castastrophe Apr 10, 2025

castastrophe Apr 10, 2025

castastrophe commented Apr 11, 2025

nikkimk commented Apr 11, 2025

nikkimk Apr 11, 2025 •

edited

Loading

nikkimk left a comment

chore: update dependency @spectrum-css/table to v8 #5336

Are you sure you want to change the base?

chore: update dependency @spectrum-css/table to v8 #5336

Conversation

renovate bot commented Apr 4, 2025

Release Notes

Minor Changes

Patch Changes

Major Changes

🛑 Breaking change

Deprecations

File usage

Patch Changes

Patch Changes

Major Changes

Minor Changes

Patch Changes

Major Changes

Patch Changes

Configuration

changeset-bot bot commented Apr 4, 2025 • edited Loading

⚠️ No Changeset found

github-actions bot commented Apr 4, 2025 • edited Loading

Branch preview

Review the following VRT differences

github-actions bot commented Apr 4, 2025

Tachometer results

renovate bot commented Apr 5, 2025

Edited/Blocked Notification

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

castastrophe commented Apr 11, 2025

nikkimk commented Apr 11, 2025

nikkimk Apr 11, 2025 • edited Loading

Choose a reason for hiding this comment

nikkimk left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Apr 4, 2025 •

edited

Loading

github-actions bot commented Apr 4, 2025 •

edited

Loading

nikkimk Apr 11, 2025 •

edited

Loading