Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 22, 2025
+244 −497
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .changeset/weak-colts-divide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"@spectrum-css/assetcard": major
"@spectrum-css/assetlist": major
"@spectrum-css/avatar": major
"@spectrum-css/badge": major
"@spectrum-css/miller": major
"@spectrum-css/well": major
---
Expand Down
264 changes: 62 additions & 202 deletions components/badge/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,232 +2,92 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-Badge",
".spectrum-Badge--accent",
".spectrum-Badge--blue",
".spectrum-Badge--brown",
".spectrum-Badge--celery",
".spectrum-Badge--chartreuse",
".spectrum-Badge--cinnamon",
".spectrum-Badge--cyan",
".spectrum-Badge--fixed-block-end",
".spectrum-Badge--fixed-block-start",
".spectrum-Badge--fixed-inline-end",
".spectrum-Badge--fixed-inline-start",
".spectrum-Badge--fuchsia",
".spectrum-Badge--gray",
".spectrum-Badge--green",
".spectrum-Badge--indigo",
".spectrum-Badge--informative",
".spectrum-Badge--magenta",
".spectrum-Badge--negative",
".spectrum-Badge--neutral",
".spectrum-Badge--notice",
".spectrum-Badge--orange",
".spectrum-Badge--pink",
".spectrum-Badge--positive",
".spectrum-Badge--purple",
".spectrum-Badge--red",
".spectrum-Badge--seafoam",
".spectrum-Badge--silver",
".spectrum-Badge--outline:where(.spectrum-Badge--accent)",
".spectrum-Badge--outline:where(.spectrum-Badge--informative)",
".spectrum-Badge--outline:where(.spectrum-Badge--negative)",
".spectrum-Badge--outline:where(.spectrum-Badge--neutral)",
".spectrum-Badge--outline:where(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)",
".spectrum-Badge--outline:where(.spectrum-Badge--notice)",
".spectrum-Badge--outline:where(.spectrum-Badge--positive)",
".spectrum-Badge--sizeL",
".spectrum-Badge--sizeS",
".spectrum-Badge--sizeXL",
".spectrum-Badge--style-outline.spectrum-Badge--accent",
".spectrum-Badge--style-outline.spectrum-Badge--informative",
".spectrum-Badge--style-outline.spectrum-Badge--negative",
".spectrum-Badge--style-outline.spectrum-Badge--neutral",
".spectrum-Badge--style-outline.spectrum-Badge--notice",
".spectrum-Badge--style-outline.spectrum-Badge--positive",
".spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)",
".spectrum-Badge--style-subtle",
".spectrum-Badge--style-subtle.spectrum-Badge--accent",
".spectrum-Badge--style-subtle.spectrum-Badge--blue",
".spectrum-Badge--style-subtle.spectrum-Badge--brown",
".spectrum-Badge--style-subtle.spectrum-Badge--celery",
".spectrum-Badge--style-subtle.spectrum-Badge--chartreuse",
".spectrum-Badge--style-subtle.spectrum-Badge--cinnamon",
".spectrum-Badge--style-subtle.spectrum-Badge--cyan",
".spectrum-Badge--style-subtle.spectrum-Badge--fuchsia",
".spectrum-Badge--style-subtle.spectrum-Badge--gray",
".spectrum-Badge--style-subtle.spectrum-Badge--green",
".spectrum-Badge--style-subtle.spectrum-Badge--indigo",
".spectrum-Badge--style-subtle.spectrum-Badge--informative",
".spectrum-Badge--style-subtle.spectrum-Badge--magenta",
".spectrum-Badge--style-subtle.spectrum-Badge--negative",
".spectrum-Badge--style-subtle.spectrum-Badge--neutral",
".spectrum-Badge--style-subtle.spectrum-Badge--notice",
".spectrum-Badge--style-subtle.spectrum-Badge--orange",
".spectrum-Badge--style-subtle.spectrum-Badge--pink",
".spectrum-Badge--style-subtle.spectrum-Badge--positive",
".spectrum-Badge--style-subtle.spectrum-Badge--purple",
".spectrum-Badge--style-subtle.spectrum-Badge--red",
".spectrum-Badge--style-subtle.spectrum-Badge--seafoam",
".spectrum-Badge--style-subtle.spectrum-Badge--silver",
".spectrum-Badge--style-subtle.spectrum-Badge--turquoise",
".spectrum-Badge--style-subtle.spectrum-Badge--yellow",
".spectrum-Badge--turquoise",
".spectrum-Badge--yellow",
".spectrum-Badge--subtle",
".spectrum-Badge--subtle:where(.spectrum-Badge--accent)",
Copy link
Contributor Author

@castastrophe castastrophe Oct 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

".spectrum-Badge--subtle:where(.spectrum-Badge--blue)",
".spectrum-Badge--subtle:where(.spectrum-Badge--brown)",
".spectrum-Badge--subtle:where(.spectrum-Badge--celery)",
".spectrum-Badge--subtle:where(.spectrum-Badge--chartreuse)",
".spectrum-Badge--subtle:where(.spectrum-Badge--cinnamon)",
".spectrum-Badge--subtle:where(.spectrum-Badge--cyan)",
".spectrum-Badge--subtle:where(.spectrum-Badge--fuchsia)",
".spectrum-Badge--subtle:where(.spectrum-Badge--gray)",
".spectrum-Badge--subtle:where(.spectrum-Badge--green)",
".spectrum-Badge--subtle:where(.spectrum-Badge--indigo)",
".spectrum-Badge--subtle:where(.spectrum-Badge--informative)",
".spectrum-Badge--subtle:where(.spectrum-Badge--magenta)",
".spectrum-Badge--subtle:where(.spectrum-Badge--negative)",
".spectrum-Badge--subtle:where(.spectrum-Badge--neutral)",
".spectrum-Badge--subtle:where(.spectrum-Badge--notice)",
".spectrum-Badge--subtle:where(.spectrum-Badge--orange)",
".spectrum-Badge--subtle:where(.spectrum-Badge--pink)",
".spectrum-Badge--subtle:where(.spectrum-Badge--positive)",
".spectrum-Badge--subtle:where(.spectrum-Badge--purple)",
".spectrum-Badge--subtle:where(.spectrum-Badge--red)",
".spectrum-Badge--subtle:where(.spectrum-Badge--seafoam)",
".spectrum-Badge--subtle:where(.spectrum-Badge--silver)",
".spectrum-Badge--subtle:where(.spectrum-Badge--turquoise)",
".spectrum-Badge--subtle:where(.spectrum-Badge--yellow)",
".spectrum-Badge-icon",
".spectrum-Badge-icon + .spectrum-Badge-label",
".spectrum-Badge-icon--no-label",
".spectrum-Badge-label",
".spectrum-Badge-label:lang(ja)",
".spectrum-Badge-label:lang(ko)",
".spectrum-Badge-label:lang(zh)"
],
"modifiers": [
"--mod-badge-background-color-accent",
"--mod-badge-background-color-blue",
"--mod-badge-background-color-brown",
"--mod-badge-background-color-celery",
"--mod-badge-background-color-chartreuse",
"--mod-badge-background-color-cinnamon",
"--mod-badge-background-color-cyan",
"--mod-badge-background-color-default",
"--mod-badge-background-color-fuchsia",
"--mod-badge-background-color-gray",
"--mod-badge-background-color-green",
"--mod-badge-background-color-indigo",
"--mod-badge-background-color-informative",
"--mod-badge-background-color-magenta",
"--mod-badge-background-color-negative",
"--mod-badge-background-color-notice",
"--mod-badge-background-color-orange",
"--mod-badge-background-color-pink",
"--mod-badge-background-color-positive",
"--mod-badge-background-color-purple",
"--mod-badge-background-color-red",
"--mod-badge-background-color-seafoam",
"--mod-badge-background-color-silver",
"--mod-badge-background-color-turquoise",
"--mod-badge-background-color-yellow",
"--mod-badge-border-color",
"--mod-badge-border-width",
"--mod-badge-corner-radius",
"--mod-badge-font-size",
"--mod-badge-height",
"--mod-badge-icon-only-spacing-horizontal",
"--mod-badge-icon-spacing-horizontal",
"--mod-badge-icon-spacing-vertical-top",
"--mod-badge-icon-text-spacing",
"--mod-badge-label-icon-color",
"--mod-badge-label-spacing-horizontal",
"--mod-badge-label-spacing-vertical-bottom",
"--mod-badge-label-spacing-vertical-top",
"--mod-badge-line-height",
"--mod-badge-line-height-cjk",
"--mod-badge-outline-background-color-default",
"--mod-badge-outline-border-color-accent",
"--mod-badge-outline-border-color-informative",
"--mod-badge-outline-border-color-negative",
"--mod-badge-outline-border-color-neutral",
"--mod-badge-outline-border-color-notice",
"--mod-badge-outline-border-color-positive",
"--mod-badge-outline-label-icon-color",
"--mod-badge-subtle-background-color-accent",
"--mod-badge-subtle-background-color-blue",
"--mod-badge-subtle-background-color-brown",
"--mod-badge-subtle-background-color-celery",
"--mod-badge-subtle-background-color-chartreuse",
"--mod-badge-subtle-background-color-cinnamon",
"--mod-badge-subtle-background-color-cyan",
"--mod-badge-subtle-background-color-default",
"--mod-badge-subtle-background-color-fuchsia",
"--mod-badge-subtle-background-color-gray",
"--mod-badge-subtle-background-color-green",
"--mod-badge-subtle-background-color-indigo",
"--mod-badge-subtle-background-color-informative",
"--mod-badge-subtle-background-color-magenta",
"--mod-badge-subtle-background-color-negative",
"--mod-badge-subtle-background-color-notice",
"--mod-badge-subtle-background-color-orange",
"--mod-badge-subtle-background-color-pink",
"--mod-badge-subtle-background-color-positive",
"--mod-badge-subtle-background-color-purple",
"--mod-badge-subtle-background-color-red",
"--mod-badge-subtle-background-color-seafoam",
"--mod-badge-subtle-background-color-silver",
"--mod-badge-subtle-background-color-turquoise",
"--mod-badge-subtle-background-color-yellow",
"--mod-badge-subtle-label-icon-color",
"--mod-badge-workflow-icon-size"
".spectrum-Badge-label:lang(zh)",
".spectrum-Badge:where(.spectrum-Badge--accent)",
".spectrum-Badge:where(.spectrum-Badge--blue)",
".spectrum-Badge:where(.spectrum-Badge--brown)",
".spectrum-Badge:where(.spectrum-Badge--celery)",
".spectrum-Badge:where(.spectrum-Badge--chartreuse)",
".spectrum-Badge:where(.spectrum-Badge--cinnamon)",
".spectrum-Badge:where(.spectrum-Badge--cyan)",
".spectrum-Badge:where(.spectrum-Badge--fuchsia)",
".spectrum-Badge:where(.spectrum-Badge--gray)",
".spectrum-Badge:where(.spectrum-Badge--green)",
".spectrum-Badge:where(.spectrum-Badge--indigo)",
".spectrum-Badge:where(.spectrum-Badge--informative)",
".spectrum-Badge:where(.spectrum-Badge--magenta)",
".spectrum-Badge:where(.spectrum-Badge--negative)",
".spectrum-Badge:where(.spectrum-Badge--neutral)",
".spectrum-Badge:where(.spectrum-Badge--notice)",
".spectrum-Badge:where(.spectrum-Badge--notice, .spectrum-Badge--orange, .spectrum-Badge--yellow, .spectrum-Badge--chartreuse, .spectrum-Badge--celery)",
".spectrum-Badge:where(.spectrum-Badge--orange)",
".spectrum-Badge:where(.spectrum-Badge--pink)",
".spectrum-Badge:where(.spectrum-Badge--positive)",
".spectrum-Badge:where(.spectrum-Badge--purple)",
".spectrum-Badge:where(.spectrum-Badge--red)",
".spectrum-Badge:where(.spectrum-Badge--seafoam)",
".spectrum-Badge:where(.spectrum-Badge--silver)",
".spectrum-Badge:where(.spectrum-Badge--turquoise)",
".spectrum-Badge:where(.spectrum-Badge--yellow)"
],
"modifiers": [],
"component": [
"--spectrum-badge-background-color-accent",
"--spectrum-badge-background-color-blue",
"--spectrum-badge-background-color-brown",
"--spectrum-badge-background-color-celery",
"--spectrum-badge-background-color-chartreuse",
"--spectrum-badge-background-color-cinnamon",
"--spectrum-badge-background-color-cyan",
"--spectrum-badge-background-color-default",
"--spectrum-badge-background-color-fuchsia",
"--spectrum-badge-background-color-gray",
"--spectrum-badge-background-color-green",
"--spectrum-badge-background-color-indigo",
"--spectrum-badge-background-color-informative",
"--spectrum-badge-background-color-magenta",
"--spectrum-badge-background-color-negative",
"--spectrum-badge-background-color-notice",
"--spectrum-badge-background-color-orange",
"--spectrum-badge-background-color-pink",
"--spectrum-badge-background-color-positive",
"--spectrum-badge-background-color-purple",
"--spectrum-badge-background-color-red",
"--spectrum-badge-background-color-seafoam",
"--spectrum-badge-background-color-silver",
"--spectrum-badge-background-color-turquoise",
"--spectrum-badge-background-color-yellow",
"--spectrum-badge-border-color",
"--spectrum-badge-border-width",
"--spectrum-badge-corner-radius",
"--spectrum-badge-font-size",
"--spectrum-badge-font-weight",
"--spectrum-badge-height",
"--spectrum-badge-icon-only-spacing-horizontal",
"--spectrum-badge-icon-spacing-horizontal",
"--spectrum-badge-icon-spacing-vertical-top",
"--spectrum-badge-icon-text-spacing",
"--spectrum-badge-label-icon-color",
"--spectrum-badge-label-spacing-horizontal",
"--spectrum-badge-label-spacing-vertical-bottom",
"--spectrum-badge-label-spacing-vertical-top",
"--spectrum-badge-line-height",
"--spectrum-badge-line-height-cjk",
"--spectrum-badge-outline-background-color",
"--spectrum-badge-outline-border-color-accent",
"--spectrum-badge-outline-border-color-informative",
"--spectrum-badge-outline-border-color-negative",
"--spectrum-badge-outline-border-color-neutral",
"--spectrum-badge-outline-border-color-notice",
"--spectrum-badge-outline-border-color-positive",
"--spectrum-badge-outline-label-icon-color",
"--spectrum-badge-subtle-background-color-accent",
"--spectrum-badge-subtle-background-color-blue",
"--spectrum-badge-subtle-background-color-brown",
"--spectrum-badge-subtle-background-color-celery",
"--spectrum-badge-subtle-background-color-chartreuse",
"--spectrum-badge-subtle-background-color-cinnamon",
"--spectrum-badge-subtle-background-color-cyan",
"--spectrum-badge-subtle-background-color-default",
"--spectrum-badge-subtle-background-color-fuchsia",
"--spectrum-badge-subtle-background-color-gray",
"--spectrum-badge-subtle-background-color-green",
"--spectrum-badge-subtle-background-color-indigo",
"--spectrum-badge-subtle-background-color-informative",
"--spectrum-badge-subtle-background-color-magenta",
"--spectrum-badge-subtle-background-color-negative",
"--spectrum-badge-subtle-background-color-notice",
"--spectrum-badge-subtle-background-color-orange",
"--spectrum-badge-subtle-background-color-pink",
"--spectrum-badge-subtle-background-color-positive",
"--spectrum-badge-subtle-background-color-purple",
"--spectrum-badge-subtle-background-color-red",
"--spectrum-badge-subtle-background-color-seafoam",
"--spectrum-badge-subtle-background-color-silver",
"--spectrum-badge-subtle-background-color-turquoise",
"--spectrum-badge-subtle-background-color-yellow",
"--spectrum-badge-subtle-label-icon-color",
"--spectrum-badge-workflow-icon-size"
],
"global": [
Expand Down Expand Up @@ -339,5 +199,5 @@
"--spectrum-yellow-subtle-background-color-default"
],
"passthroughs": [],
"high-contrast": ["--highcontrast-badge-border-color"]
"high-contrast": []
}
Loading
Loading