feat(badge): remove modifiers from the API [SWC-1264] #4283

castastrophe · 2025-10-22T18:45:16Z

Description

This update removes --mod-badge-* custom property hooks per SWC-1264, see also the RFC for extensible styling. Class selectors and variants remain unchanged; stories were refreshed to match the current API.

Remove all --mod-badge-* custom property hooks.
Reduces unnecessary re-mapping of custom properties in favor of using them directly

Breaking change: the --mod-badge-* override layer is removed. Consumers should set --spectrum-badge-* variables directly where customization as needed.

Related issue(s)

fixes SWC-1264

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes (or confirmed existing coverage is sufficient for styling-only changes).
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a GitHub Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are passing or approved

Validation steps

No visual or behavioral changes compared to the current spectrum-two baseline.

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:
- The pages render correctly, are accessible, and are responsive.
If components have been modified, VRTs have been run on this branch:
- VRTs have been run and looked at.
- Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

changeset-bot · 2025-10-22T18:45:22Z

⚠️ No Changeset found

Latest commit: 8237249

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 changesets to release 10 packages

Name	Type
@spectrum-css/alertdialog	Major
@spectrum-css/asset	Major
@spectrum-css/assetcard	Major
@spectrum-css/assetlist	Major
@spectrum-css/avatar	Major
@spectrum-css/badge	Major
@spectrum-css/miller	Major
@spectrum-css/well	Major
@spectrum-css/bundle	Patch
@spectrum-css/preview	Patch

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-10-22T19:01:14Z

📚 Branch preview

PR #4283 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4283/index.html.

github-actions · 2025-10-22T19:01:39Z

File metrics

Summary

Total size: 1.41 MB^*

Package	Size	Minified	Gzipped
badge	13.66 KB	12.95 KB	1.73 KB

badge

Filename	Head	Minified	Gzipped	Compared to base
index.css	13.66 KB	12.95 KB	1.73 KB	🟢 ⬇ 9.31 KB
metadata.json	9.72 KB	-	-	🟢 ⬇ 5.78 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

castastrophe · 2025-10-22T19:50:36Z

components/badge/dist/metadata.json

-    ".spectrum-Badge--turquoise",
-    ".spectrum-Badge--yellow",
+    ".spectrum-Badge--subtle",
+    ".spectrum-Badge--subtle:where(.spectrum-Badge--accent)",


FYI in the SWC next-gen web component we updated this class to remove the -style from the class name.

rise-erpelding

Looks good! Left some questions for building my own knowledge on this work.

rise-erpelding · 2025-10-22T19:20:13Z

.changeset/weak-colts-divide.md

 ---

-This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling.
+This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling. In addition, this update cleans up any component-level custom properties that did not rely on the CSS cascade to define the styles; this was done to reduce the number of custom properties that are defined at the component level and trim down the size of the CSS we are shipping to consumers.


Love this update! ❤️

rise-erpelding · 2025-10-22T19:37:18Z

components/badge/index.css

 	/* background color variants */
-	&.spectrum-Badge--neutral {
-		background: var(--mod-badge-subtle-background-color-default, var(--spectrum-badge-subtle-background-color-default));
+	&:where(.spectrum-Badge--neutral) {


Tell me more about :where() in this context, it seems like the benefit over trying to match both classes is that it doesn't add specificity, right? I'm especially curious as we carry out similar CSS updates in other components. Will we want to consider this pattern in similar use cases in other components? Any pitfalls to be aware of? Any other things to note? (I believe it was :where in another component in that action menu PR I reviewed where we discovered that we actually did want the added specificity, for instance.)

Yes, great questions. Badge is a good use-case for :where in that there are only a few variants active at any given time. I kept specificity on outline and subtle but where the colors showed up, I let the order they show up in the file be the deciding factor. For more complex components this gets ultra tricky because there are cases where we want that specificity. This seemed like a great opportunity to reduce it though so I added it here.

rise-erpelding · 2025-10-22T19:45:48Z

components/badge/index.css

 /* Style = subtle */
-.spectrum-Badge--style-subtle {
-	color: var(--mod-badge-subtle-label-icon-color, var(--spectrum-badge-subtle-label-icon-color));
+.spectrum-Badge--subtle {


I'm on board with this change (and I see it's in barebones already 🎉 ), and given that our changeset will reflect alll the other component changes, I think I can see the rationale for not documenting this change in the changeset and I'm on board with that too... but I still want to highlight it for consideration in case someone else has a strong opinion or we have second thoughts.

Yes, I did check our changesets to see if there were any references to the new class name and since it wasn't there, I opted to leave it out of the new docs. The concept of what was added is in the previous changeset but not the class name specifically.

rise-erpelding · 2025-10-22T19:57:47Z

components/badge/index.css

Are there any plans to carry over these changes to barebones? I'm assuming we'd want this version of the CSS to land in SWC at some point.

castastrophe changed the base branch from main to spectrum-two October 22, 2025 18:47

castastrophe marked this pull request as ready for review October 22, 2025 18:47

castastrophe self-assigned this Oct 22, 2025

castastrophe added size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. run_vrt For use on PRs looking to kick off VRT S2 Spectrum 2 ready-for-review labels Oct 22, 2025

castastrophe force-pushed the castastrophe/feat-badge-modifier-removal branch from 867caf9 to bf4974a Compare October 22, 2025 19:11

feat(badge): remove modifiers from the API [SWC-1264]

8237249

castastrophe force-pushed the castastrophe/feat-badge-modifier-removal branch from bf4974a to 8237249 Compare October 22, 2025 19:47

castastrophe commented Oct 22, 2025

View reviewed changes

rise-erpelding approved these changes Oct 22, 2025

View reviewed changes

castastrophe merged commit f224547 into spectrum-two Oct 22, 2025
14 of 15 checks passed

castastrophe deleted the castastrophe/feat-badge-modifier-removal branch October 22, 2025 20:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(badge): remove modifiers from the API [SWC-1264] #4283

feat(badge): remove modifiers from the API [SWC-1264] #4283

Uh oh!

castastrophe commented Oct 22, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Oct 22, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 22, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 22, 2025 •

edited

Loading

Uh oh!

castastrophe Oct 22, 2025

Uh oh!

rise-erpelding left a comment

Uh oh!

rise-erpelding Oct 22, 2025

Uh oh!

rise-erpelding Oct 22, 2025

Uh oh!

castastrophe Oct 22, 2025

Uh oh!

rise-erpelding Oct 22, 2025

Uh oh!

castastrophe Oct 22, 2025

Uh oh!

rise-erpelding Oct 22, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(badge): remove modifiers from the API [SWC-1264] #4283

feat(badge): remove modifiers from the API [SWC-1264] #4283

Uh oh!

Conversation

castastrophe commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issue(s)

Author's checklist

Reviewer's checklist

Validation steps

Regression testing

Uh oh!

changeset-bot bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch preview

Uh oh!

github-actions bot commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

badge

Uh oh!

castastrophe Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

castastrophe Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

castastrophe Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

rise-erpelding Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

castastrophe commented Oct 22, 2025 •

edited

Loading

changeset-bot bot commented Oct 22, 2025 •

edited

Loading

github-actions bot commented Oct 22, 2025 •

edited

Loading

github-actions bot commented Oct 22, 2025 •

edited

Loading