Skip to content

fix(actionbutton): reduce mod interception #3664

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

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

fix(actionbutton): reduce mod interception #3664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
16f19fe
fix(actionbutton): reduce mod interception
castastrophe Apr 10, 2025
c31d380
fix(actionbutton): quiet disabled+selected mod
marissahuysentruyt Apr 11, 2025
5ca3f4d
chore: working through static color specificity
castastrophe Apr 11, 2025
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
10 changes: 10 additions & 0 deletions .changeset/silly-cobras-behave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"@spectrum-css/actionbutton": patch
---

This update aims to simplify `--mod-` access by ensuring local variants and states aren't hooking into those custom properties for overrides. This updates all local variants and states to override the `--spectrum-actionbutton-` properties instead and adjusts the specificity to ensure no regressions in rendered results.

Other changes of note:

- Removes the `.spectrum-ActionButton--sizeM` as unnecessary and duplicate as these styles are applied in the base class.
- Reduces the use of the `:not()` pseudo-class in theme overrides as these selectors are more complex to remap for web component projects.
32 changes: 27 additions & 5 deletions components/actionbutton/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"selectors": [
".spectrum-ActionButton",
".spectrum-ActionButton--sizeL",
".spectrum-ActionButton--sizeM",
".spectrum-ActionButton--sizeS",
".spectrum-ActionButton--sizeXL",
".spectrum-ActionButton--sizeXS",
Expand All @@ -21,7 +20,6 @@
".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
".spectrum-ActionButton.spectrum-ActionButton--quiet",
".spectrum-ActionButton.spectrum-ActionButton--sizeL",
".spectrum-ActionButton.spectrum-ActionButton--sizeM",
".spectrum-ActionButton.spectrum-ActionButton--sizeS",
".spectrum-ActionButton.spectrum-ActionButton--sizeXL",
".spectrum-ActionButton.spectrum-ActionButton--sizeXS",
Expand Down Expand Up @@ -56,6 +54,7 @@
"--mod-actionbutton-background-color-hover",
"--mod-actionbutton-background-color-hover-selected",
"--mod-actionbutton-background-color-hover-selected-emphasized",
"--mod-actionbutton-background-color-selected-disabled",
"--mod-actionbutton-border-color-default",
"--mod-actionbutton-border-color-disabled",
"--mod-actionbutton-border-color-down",
Expand Down Expand Up @@ -89,7 +88,20 @@
"--mod-actionbutton-icon-size",
"--mod-actionbutton-label-color",
"--mod-actionbutton-min-width",
"--mod-actionbutton-static-black-content-color",
"--mod-actionbutton-static-black-content-color-down",
"--mod-actionbutton-static-black-content-color-down-selected",
"--mod-actionbutton-static-black-content-color-focus",
"--mod-actionbutton-static-black-content-color-focus-selected",
"--mod-actionbutton-static-black-content-color-hover",
"--mod-actionbutton-static-black-content-color-hover-selected",
"--mod-actionbutton-static-black-content-color-selected",
"--mod-actionbutton-static-content-color",
"--mod-actionbutton-static-white-content-color",
"--mod-actionbutton-static-white-content-color-down",
"--mod-actionbutton-static-white-content-color-focus",
"--mod-actionbutton-static-white-content-color-hover",
"--mod-actionbutton-static-white-content-color-selected",
"--mod-actionbutton-text-to-visual",
"--mod-animation-duration-100",
"--mod-line-height-100",
Expand All @@ -101,12 +113,14 @@
"--spectrum-action-button-edge-to-hold-icon-large",
"--spectrum-action-button-edge-to-hold-icon-medium",
"--spectrum-action-button-edge-to-hold-icon-small",
"--spectrum-actionbutton-background-color",
"--spectrum-actionbutton-background-color-default",
"--spectrum-actionbutton-background-color-disabled",
"--spectrum-actionbutton-background-color-down",
"--spectrum-actionbutton-background-color-down-selected",
"--spectrum-actionbutton-background-color-focus",
"--spectrum-actionbutton-background-color-focus-selected",
"--spectrum-actionbutton-background-color-hover",
"--spectrum-actionbutton-background-color-hover-selected",
"--spectrum-actionbutton-background-color-selected",
"--spectrum-actionbutton-background-color-selected-disabled",
"--spectrum-actionbutton-background-color-selected-down",
Expand All @@ -121,7 +135,7 @@
"--spectrum-actionbutton-border-radius",
"--spectrum-actionbutton-border-radius-default",
"--spectrum-actionbutton-border-width",
"--spectrum-actionbutton-content-color",
"--spectrum-actionbutton-content-color-disabled",
"--spectrum-actionbutton-content-color-selected",
"--spectrum-actionbutton-edge-to-hold-icon",
"--spectrum-actionbutton-edge-to-text",
Expand Down Expand Up @@ -241,6 +255,7 @@
"--system-action-button-border-color-down",
"--system-action-button-border-color-focus",
"--system-action-button-border-color-hover",
"--system-action-button-border-radius-default",
"--system-action-button-content-color-selected",
"--system-action-button-quiet-background-color-default",
"--system-action-button-quiet-background-color-disabled",
Expand All @@ -249,15 +264,18 @@
"--system-action-button-quiet-background-color-hover",
"--system-action-button-quiet-background-color-selected-disabled",
"--system-action-button-size-l-border-radius-default",
"--system-action-button-size-m-border-radius-default",
"--system-action-button-size-s-border-radius-default",
"--system-action-button-size-xl-border-radius-default",
"--system-action-button-size-xs-border-radius-default",
"--system-action-button-static-black-background-color-default",
"--system-action-button-static-black-background-color-disabled",
"--system-action-button-static-black-background-color-down",
"--system-action-button-static-black-background-color-down-selected",
"--system-action-button-static-black-background-color-focus",
"--system-action-button-static-black-background-color-focus-selected",
"--system-action-button-static-black-background-color-hover",
"--system-action-button-static-black-background-color-hover-selected",
"--system-action-button-static-black-background-color-selected",
"--system-action-button-static-black-background-color-selected-disabled",
"--system-action-button-static-black-border-color-default",
"--system-action-button-static-black-border-color-disabled",
Expand All @@ -272,8 +290,12 @@
"--system-action-button-static-white-background-color-default",
"--system-action-button-static-white-background-color-disabled",
"--system-action-button-static-white-background-color-down",
"--system-action-button-static-white-background-color-down-selected",
"--system-action-button-static-white-background-color-focus",
"--system-action-button-static-white-background-color-focus-selected",
"--system-action-button-static-white-background-color-hover",
"--system-action-button-static-white-background-color-hover-selected",
"--system-action-button-static-white-background-color-selected",
"--system-action-button-static-white-background-color-selected-disabled",
"--system-action-button-static-white-border-color-default",
"--system-action-button-static-white-border-color-disabled",
Expand Down
Loading
Loading