[Bug]: ActionButton: --mod-* vars not working anymore if combined

[spdev3000]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

ActionButton

Expected behavior

users have the possibility to use custom --mod-* vars to style ActionButtons, this should work for all provided states, such as hover, down (active) and `disabled, so I would expect to have this working when providing combination of (for example):

   --mod-actionbutton-border-color-default: var(--spectrum-global-color-static-gray-400);
    --mod-actionbutton-border-color-hover: var(--spectrum-global-color-static-gray-500);
    --mod-actionbutton-border-color-down: var(--spectrum-global-color-static-gray-700);
    --mod-actionbutton-background-color-default: var(--spectrum-global-color-static-gray-75);
    --mod-actionbutton-background-color-hover: var(--spectrum-global-color-static-gray-200);
    --mod-actionbutton-background-color-down: var(--spectrum-global-color-static-gray-300);
    --mod-actionbutton-background-color-disabled: var(--spectrum-global-color-static-gray-300);

Actual behavior

Providing those --mod-* vars together overrides the different state vars, such as *-hover, *-down or *-disabled on the current actionbutton.css and no change of colors is rendered.

Screenshots

No response

What browsers are you seeing the problem in?

Chrome

How can we reproduce this issue?

1. Go to https://stackblitz.com/edit/vitejs-vite-dqvm9txc?file=src%2Fmy-element.js
2. Compare different styles of customized actionbutton
3. Try hovering or clicking on the buttons - no visible change
4. Also see disabled button that doesn't change when combination of css custom mods are provided

Sample code or abstract reproduction which illustrates the problem

No response

Severity

SEV 4

Logs taken while reproducing problem

No response

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!

[spdev3000]

maybe related to #5267 ?