fix(action-button): expand Spectrum CSS processing

adobe · Mar 26, 2021 · ff1a424 · ff1a424
1 parent 708d587
commit ff1a424
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css
@@ -886,7 +886,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-icon-color-hover)
     );
 }
-:host([emphasized]) .is-active {
+:host([emphasized][active]) {
     /* .spectrum-ActionButton--emphasized.is-active */
     background-color: var(
         --spectrum-actionbutton-m-emphasized-background-color-down,
@@ -902,7 +902,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color-down)
     );
 }
-:host([emphasized]) .is-active #hold-affordance {
+:host([emphasized][active]) #hold-affordance {
     /* .spectrum-ActionButton--emphasized.is-active .spectrum-ActionButton-hold */
     color: var(
         --spectrum-actionbutton-m-emphasized-hold-icon-color-down,
@@ -1022,8 +1022,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-static-white)
     );
 }
-:host([emphasized][selected]) .is-active,
-:host([emphasized][quiet][selected]) .is-active {
+:host([emphasized][selected][active]),
+:host([emphasized][quiet][selected][active]) {
     /* .spectrum-ActionButton--emphasized.is-selected.is-active,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active */
     background-color: var(
@@ -1039,8 +1039,8 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-static-white)
     );
 }
-:host([emphasized][selected]) .is-active ::slotted([slot='icon']),
-:host([emphasized][quiet][selected]) .is-active ::slotted([slot='icon']) {
+:host([emphasized][selected][active]) ::slotted([slot='icon']),
+:host([emphasized][quiet][selected][active]) ::slotted([slot='icon']) {
     /* .spectrum-ActionButton--emphasized.is-selected.is-active .spectrum-Icon,
    * .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active .spectrum-Icon */
     color: var(

diff --git a/packages/action-button/src/spectrum-config.js b/packages/action-button/src/spectrum-config.js
@@ -38,6 +38,11 @@ const config = {
                     selector: ':active',
                     name: 'active',
                 },
+                {
+                    type: 'boolean',
+                    selector: '.is-active',
+                    name: 'active',
+                },
                 {
                     type: 'boolean',
                     name: 'emphasized',