From 2a51dc82b850493975024f5c99d42825faca1755 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Fri, 22 Apr 2022 17:51:10 -0700
Subject: [PATCH 01/23] feat: basic implementation of core tokens for
 ActionButton

BREAKING CHANGE: .spectrum-ActionButton-icon is now required
---
 components/actionbutton/index.css             | 198 ++++++++--------
 .../actionbutton/metadata/actionbutton.yml    | 219 +++++++++---------
 2 files changed, 204 insertions(+), 213 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 5bee87f2a3f..1feab03c1cd 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -11,120 +11,127 @@ governing permissions and limitations under the License.
 */
 
 @import "../commons/basebutton.css";
-@import "../vars/css/components/spectrum-actionbutton.css";
 @import "./actionbutton-generated.css";
 
-.spectrum-ActionButton--sizeS {
-  @remapvars {
-    find: --spectrum-actionbutton-s-;
-    replace: --spectrum-actionbutton-;
-  }
+.spectrum {
+  --spectrum-animation-duration-100: 130ms;
 
-  /* todo: remove hardcoded values when we update DNA */
-  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-25);
-  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-25);
+  --spectrum-edge-to-visual-only-75: 4px;
+  --spectrum-edge-to-visual-only-100: 7px;
+  --spectrum-edge-to-visual-only-200: 8px;
+  --spectrum-edge-to-visual-only-300: 9px;
+}
 
-  /* hack to fix the incorrect min-width */
-  --spectrum-actionbutton-textonly-min-width: var(--spectrum-global-dimension-size-300);
+
+.spectrum-ActionButton--sizeS {
+  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-75);
+  --spectrum-actionbutton-height: var(--spectrum-component-height-75);
+
+  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
+  --spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
+  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
+  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
+  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-75) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-75) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width));
 }
 
 .spectrum-ActionButton--sizeM {
-  @remapvars {
-    find: --spectrum-actionbutton-m-;
-    replace: --spectrum-actionbutton-;
-  }
-
-  /* todo: remove hardcoded values when we update DNA */
-  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-40);
-  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-40);
+  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-100);
+  --spectrum-actionbutton-height: var(--spectrum-component-height-100);
+
+  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
+  --spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
+  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
+  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
+  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-100) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-100) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width));
 }
 
 .spectrum-ActionButton--sizeL {
-  @remapvars {
-    find: --spectrum-actionbutton-l-;
-    replace: --spectrum-actionbutton-;
-  }
-
-  /* todo: remove hardcoded values when we update DNA */
-  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-50);
-  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-50);
+  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-200);
+  --spectrum-actionbutton-height: var(--spectrum-component-height-200);
+
+  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
+  --spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
+  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
+  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
+  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-200) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-200) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width));
 }
 
 .spectrum-ActionButton--sizeXL {
-  @remapvars {
-    find: --spectrum-actionbutton-xl-;
-    replace: --spectrum-actionbutton-;
-  }
-
-  /* todo: remove hardcoded values when we update DNA */
-  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-65);
-  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-65);
+  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-300);
+  --spectrum-actionbutton-height: var(--spectrum-component-height-300);
+
+  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
+  --spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
+  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
+  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
+  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-300) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-300) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width));
 }
 
-.spectrum-ActionButton {/* --spectrum-actionbutton-textonly-padding-left 12px */ /* --spectrum-actionbutton-textonly-border-size 1px */
-  /* Adjustments for inset/outset padding in DNA */
-  --spectrum-actionbutton-padding-left-adjusted: calc(var(--spectrum-actionbutton-texticon-padding-left) - var(--spectrum-actionbutton-texticon-border-size));
-  --spectrum-actionbutton-padding-right-adjusted: calc(var(--spectrum-actionbutton-texticon-padding-right) - var(--spectrum-actionbutton-texticon-border-size));
-  --spectrum-actionbutton-textonly-padding-left-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-left) - var(--spectrum-actionbutton-textonly-border-size));
-  --spectrum-actionbutton-textonly-padding-right-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-right) - var(--spectrum-actionbutton-textonly-border-size));
-  --spectrum-actionbutton-icononly-padding-left-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-left) - var(--spectrum-actionbutton-icononly-border-size));
-  --spectrum-actionbutton-icononly-padding-right-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-right) - var(--spectrum-actionbutton-icononly-border-size));
-  --spectrum-actionbutton-focus-ring-border-radius-adjusted: calc(var(--spectrum-actionbutton-quiet-textonly-border-radius) + var(--spectrum-actionbutton-focus-ring-gap));
-}
+.spectrum-ActionButton {
+  --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100);
+  --spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
 
-a.spectrum-ActionButton {
-  @inherit: %spectrum-AnchorButton;
+  --spectrum-actionbutton-focus-ring-gap: var(--spectrum-focus-ring-gap);
+  --spectrum-actionbutton-focus-ring-thickness: var(--spectrum-focus-ring-thickness);
+  --spectrum-actionbutton-focus-ring-color: var(--spectrum-focus-ring-color);
+  --spectrum-actionbutton-focus-ring-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap));
 }
 
 .spectrum-ActionButton {
   @inherit: %spectrum-BaseButton;
   position: relative;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 
-  block-size: var(--spectrum-actionbutton-textonly-height);
-  min-inline-size: var(--spectrum-actionbutton-textonly-min-width);
+  min-inline-size: var(--spectrum-actionbutton-min-width);
+  height: var(--spectrum-actionbutton-height);
+  border-radius: var(--spectrum-actionbutton-border-radius);
+  border-width: var(--spectrum-actionbutton-border-width);
 
   /* Start with text-only padding */
-  padding-inline: var(--spectrum-actionbutton-textonly-padding-left-adjusted) var(--spectrum-actionbutton-textonly-padding-right-adjusted);
-
-  border-width: var(--spectrum-actionbutton-textonly-border-size);
-  border-radius: var(--spectrum-actionbutton-textonly-border-radius);
-
-  font-size: var(--spectrum-actionbutton-textonly-text-size);
-  font-weight: var(--spectrum-actionbutton-textonly-text-font-weight);
-  line-height: var(--spectrum-actionbutton-textonly-text-line-height);
-
-  /* Let static variants inherit their color */
-  color: inherit;
+  padding-inline-start: var(--spectrum-actionbutton-edge-to-text);
+  padding-inline-end: var(--spectrum-actionbutton-edge-to-text);
+}
 
-  .spectrum-Icon {
-    @inherit: %spectrum-ButtonIcon;
+a.spectrum-ActionButton {
+  @inherit: %spectrum-AnchorButton;
+}
 
-    /* Scoot over, assuming we have both icon and text */
-    margin-inline-start: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
-  }
+.spectrum-ActionButton-icon {
+  width: var(--spectrum-actionbutton-icon-size);
+  height: var(--spectrum-actionbutton-icon-size);
 
-  .spectrum-Icon + .spectrum-ActionButton-label {
+  & + .spectrum-ActionButton-label {
     /* Have gap on on the left */
-    padding-inline-start: var(--spectrum-actionbutton-texticon-icon-gap);
+    padding-inline-start: var(--spectrum-actionbutton-text-to-visual);
 
-    /*
-      Have no padding on the right (it's built into the element)
-      This will fail if --spectrum-actionbutton-textonly-padding-right !== --spectrum-actionbutton-padding-right
-    */
+    /* Have no padding on the right (it's built into the element) */
     padding-inline-end: 0;
   }
 
-  .spectrum-ActionButton-hold + .spectrum-Icon,
-  .spectrum-Icon:only-child {
-    /* Use icon-only padding, subtracted from the default text-only padding */
-    margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-icononly-padding-left-adjusted)));
-    margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-right-adjusted) - var(--spectrum-actionbutton-icononly-padding-right-adjusted)));
-  }
+  margin-inline-start: calc(-1 * (var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual)));
+}
+
+.spectrum-ActionButton-hold + .spectrum-ActionButton-icon,
+.spectrum-ActionButton-icon:only-child {
+  /* Use icon-only padding, subtracted from the default text-only padding */
+  margin-inline-start: calc(-1 * (var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only)));
+  margin-inline-end: calc(-1 * (var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only)));
 }
 
 .spectrum-ActionButton-label {
   @inherit: %spectrum-ButtonLabel;
 
+  font-size: var(--spectrum-actionbutton-font-size);
+
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -132,27 +139,16 @@ a.spectrum-ActionButton {
 
 .spectrum-ActionButton-hold {
   position: absolute;
-  inset-inline-end: var(--spectrum-actionbutton-textonly-hold-icon-padding-right);
-  inset-block-end: var(--spectrum-actionbutton-textonly-hold-icon-padding-bottom);
+  inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
+  inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
 
   transform: logical rotate(0deg);
 }
 
-.spectrum-ActionButton--quiet {
-  border-width: var(--spectrum-actionbutton-quiet-textonly-border-size);
-  border-radius: var(--spectrum-actionbutton-quiet-textonly-border-radius);
-
-  font-size: var(--spectrum-actionbutton-quiet-textonly-text-size);
-  font-weight: var(--spectrum-actionbutton-quiet-textonly-text-font-weight);
-}
 
 /* special cases for focus-ring */
 .spectrum-ActionButton {
-  --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap);
-  --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size);
-  --spectrum-actionbutton-focus-ring-color: var(--spectrum-actionbutton-m-textonly-focus-ring-border-color-key-focus);
-
-  transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out;
+  transition: border-color var(--spectrum-animation-duration-100) ease-in-out;
 
   &:after {
     pointer-events: none;
@@ -162,32 +158,24 @@ a.spectrum-ActionButton {
     right: 0;
     bottom: 0;
     top: 0;
-    margin: calc((var(--spectrum-actionbutton-focus-ring-gap) + var(--spectrum-actionbutton-textonly-border-size)) * -1);
-    border-radius: var(--spectrum-actionbutton-focus-ring-border-radius-adjusted);
-    transition: box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;
+    margin: calc((var(--spectrum-actionbutton-focus-ring-gap) + var(--spectrum-actionbutton-border-width)) * -1);
+    border-radius: var(--spectrum-actionbutton-focus-ring-border-radius);
+    transition: box-shadow var(--spectrum-animation-duration-100) ease-in-out;
   }
 
   &:focus-ring {
-    /* kill the default ring */
     box-shadow: none !important;
 
     &:after {
-      box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-ring-size) var(--spectrum-actionbutton-focus-ring-color);
+      box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-ring-thickness) var(--spectrum-actionbutton-focus-ring-color);
     }
   }
 }
 
 .spectrum-ActionButton--staticWhite {
-  --spectrum-actionbutton-focus-ring-color: var(--spectrum-global-color-static-white);
-}
-
-.spectrum-ActionButton--staticBlack {
-  --spectrum-actionbutton-focus-ring-color: var(--spectrum-global-color-static-black);
+  --spectrum-actionbutton-focus-ring-color: var(--spectrum-white);
 }
 
-.spectrum-ActionButton--emphasized.is-selected,
-.spectrum-ActionButton--staticWhite,
 .spectrum-ActionButton--staticBlack {
-  --spectrum-actionbutton-focus-ring-gap: var(--spectrum-alias-component-focusring-gap-emphasized);
-  --spectrum-actionbutton-focus-ring-size: var(--spectrum-alias-component-focusring-size-emphasized);
+  --spectrum-actionbutton-focus-ring-color: var(--spectrum-black);
 }
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml
index 75a07a21325..dedcbf6d3f5 100644
--- a/components/actionbutton/metadata/actionbutton.yml
+++ b/components/actionbutton/metadata/actionbutton.yml
@@ -8,6 +8,9 @@ description: |
 sections:
   - name: Migration Guide
     description: |
+      ### Action Button now required a class on its icon
+      The `.spectrum-ActionButton-icon` class is now required on the icon.
+
       ### T-shirt sizing
       Action Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-ActionButton--size*` class.
 
@@ -52,14 +55,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeS">
-              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeS">
-              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -68,7 +71,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle75 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle75" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -83,14 +86,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -99,7 +102,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -115,14 +118,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeL">
-              <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeL">
-              <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -131,7 +134,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle200 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle200" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -147,14 +150,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeXL">
-              <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeXL">
-              <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -163,7 +166,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle300 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle300" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -184,14 +187,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -200,7 +203,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -215,14 +218,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -231,7 +234,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -246,14 +249,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -262,7 +265,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -277,14 +280,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -293,7 +296,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -315,14 +318,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -331,7 +334,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -346,14 +349,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -362,7 +365,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -377,14 +380,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -393,7 +396,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -408,14 +411,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -424,7 +427,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -446,14 +449,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -462,7 +465,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -477,14 +480,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -493,7 +496,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -508,14 +511,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -524,7 +527,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -539,14 +542,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -555,7 +558,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -576,14 +579,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -592,7 +595,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -607,14 +610,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -623,7 +626,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -638,14 +641,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -654,7 +657,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -669,14 +672,14 @@ examples:
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
               <span class="spectrum-ActionButton-label">Edit</span>
             </button>
 
             <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -685,7 +688,7 @@ examples:
               <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
               </svg>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                 <use xlink:href="#spectrum-icon-18-Edit" />
               </svg>
             </button>
@@ -707,14 +710,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -723,7 +726,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -738,14 +741,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite is-selected">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite is-selected">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -754,7 +757,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -769,14 +772,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -785,7 +788,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -800,14 +803,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite is-selected" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite is-selected" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -816,7 +819,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -839,14 +842,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -855,7 +858,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -870,14 +873,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack is-selected">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack is-selected">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -886,7 +889,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -901,14 +904,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -917,7 +920,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -932,14 +935,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack is-selected" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack is-selected" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -948,7 +951,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -972,14 +975,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite spectrum-ActionButton--quiet">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite spectrum-ActionButton--quiet">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -988,7 +991,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1003,14 +1006,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite spectrum-ActionButton--quiet is-selected">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite spectrum-ActionButton--quiet is-selected">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1019,7 +1022,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1034,14 +1037,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite spectrum-ActionButton--quiet" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite spectrum-ActionButton--quiet" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1050,7 +1053,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1065,14 +1068,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite spectrum-ActionButton--quiet is-selected" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticWhite spectrum-ActionButton--quiet is-selected" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1081,7 +1084,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1104,14 +1107,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack spectrum-ActionButton--quiet">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack spectrum-ActionButton--quiet">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1120,7 +1123,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1135,14 +1138,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack spectrum-ActionButton--quiet is-selected">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack spectrum-ActionButton--quiet is-selected">
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1151,7 +1154,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1166,14 +1169,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack spectrum-ActionButton--quiet" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack spectrum-ActionButton--quiet" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1182,7 +1185,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1197,14 +1200,14 @@ examples:
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack spectrum-ActionButton--quiet is-selected" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
                 <span class="spectrum-ActionButton-label">Edit</span>
               </button>
 
               <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--staticBlack spectrum-ActionButton--quiet is-selected" disabled>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>
@@ -1213,7 +1216,7 @@ examples:
                 <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
                 </svg>
-                <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
                   <use xlink:href="#spectrum-icon-18-Edit" />
                 </svg>
               </button>

From 3be0152acd262803406e3984937c1dd04c2d1be1 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Mon, 25 Apr 2022 09:53:05 -0700
Subject: [PATCH 02/23] refactor: remove core tokens overrides from
 ActionButton

they now live in components/coretokens/custom.css
---
 components/actionbutton/index.css | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 1feab03c1cd..64c3421c6ce 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -13,16 +13,6 @@ governing permissions and limitations under the License.
 @import "../commons/basebutton.css";
 @import "./actionbutton-generated.css";
 
-.spectrum {
-  --spectrum-animation-duration-100: 130ms;
-
-  --spectrum-edge-to-visual-only-75: 4px;
-  --spectrum-edge-to-visual-only-100: 7px;
-  --spectrum-edge-to-visual-only-200: 8px;
-  --spectrum-edge-to-visual-only-300: 9px;
-}
-
-
 .spectrum-ActionButton--sizeS {
   --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-75);
   --spectrum-actionbutton-height: var(--spectrum-component-height-75);

From ce89dbc9ba0e6c58bcdf8cb63f9eab3e2672e4b1 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Tue, 26 Apr 2022 12:23:53 -0700
Subject: [PATCH 03/23] feat: a start on core tokens for ActionButton colors

---
 components/actionbutton/index.css | 125 +++++++++++++-
 components/actionbutton/skin.css  | 261 ------------------------------
 2 files changed, 124 insertions(+), 262 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 64c3421c6ce..f6816ed3788 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -11,7 +11,55 @@ governing permissions and limitations under the License.
 */
 
 @import "../commons/basebutton.css";
-@import "./actionbutton-generated.css";
+
+.spectrum {
+  --spectrum-actionbutton-background-color: var(--spectrum-gray-75);
+  --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-50);
+  --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+  --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-50);
+
+  --spectrum-actionbutton-border-color: var(--spectrum-gray-400);
+  --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
+  --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
+  --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
+
+  --spectrum-actionbutton-quiet-background-color: transparent;
+  --spectrum-actionbutton-quiet-background-color-hover: transparent;
+  --spectrum-actionbutton-quiet-background-color-down: var(--spectrum-gray-200);
+  --spectrum-actionbutton-quiet-background-color-focus: transparent;
+
+  --spectrum-actionbutton-content-color: var(--spectrum-neutral-content-color); /* todo: this may be named wrong */
+  --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover);
+  --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
+  --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+  --spectrum-actionbutton-selected-background-color: var(--spectrum-neutral-subdued-background-color-default);
+  --spectrum-actionbutton-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
+  --spectrum-actionbutton-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
+  --spectrum-actionbutton-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
+
+  --spectrum-actionbutton-emphasized-selected-background-color: var(--spectrum-accent-background-color-default);
+  --spectrum-actionbutton-emphasized-selected-background-color-hover: var(--spectrum-accent-background-color-hover);
+  --spectrum-actionbutton-emphasized-selected-background-color-down: var(--spectrum-accent-background-color-down);
+  --spectrum-actionbutton-emphasized-selected-background-color-focus: var(--spectrum-accent-background-color-key-focus);
+}
+
+.spectrum--express {
+  --spectrum-actionbutton-background-color: var(--spectrum-gray-200);
+  --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
+  --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
+  --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
+
+  --spectrum-actionbutton-border-color: transparent;
+  --spectrum-actionbutton-border-color-hover: transparent;
+  --spectrum-actionbutton-border-color-down: transparent;
+  --spectrum-actionbutton-border-color-focus: transparent;
+
+  --spectrum-actionbutton-selected-background-color: var(--spectrum-neutral-background-color-default);
+  --spectrum-actionbutton-selected-background-color-hover: var(--spectrum-neutral-background-color-hover);
+  --spectrum-actionbutton-selected-background-color-down: var(--spectrum-neutral-background-color-down);
+  --spectrum-actionbutton-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
+}
 
 .spectrum-ActionButton--sizeS {
   --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-75);
@@ -89,6 +137,78 @@ governing permissions and limitations under the License.
   /* Start with text-only padding */
   padding-inline-start: var(--spectrum-actionbutton-edge-to-text);
   padding-inline-end: var(--spectrum-actionbutton-edge-to-text);
+
+  background-color: var(--spectrum-actionbutton-background-color);
+  border-color: var(--spectrum-actionbutton-border-color);
+  color: var(--spectrum-actionbutton-content-color);
+
+  &:hover {
+    background-color: var(--spectrum-actionbutton-background-color-hover);
+    border-color: var(--spectrum-actionbutton-border-color-hover);
+    color: var(--spectrum-actionbutton-content-color-hover);
+  }
+  &:active {
+    background-color: var(--spectrum-actionbutton-background-color-down);
+    border-color: var(--spectrum-actionbutton-border-color-down);
+    color: var(--spectrum-actionbutton-content-color-down);
+  }
+  &:focus-ring {
+    background-color: var(--spectrum-actionbutton-background-color-focus);
+    border-color: var(--spectrum-actionbutton-border-color-focus);
+    color: var(--spectrum-actionbutton-content-color-focus);
+  }
+
+  &.is-selected {
+    border-color: transparent;
+    background-color: var(--spectrum-actionbutton-selected-background-color);
+    &:hover {
+      background-color: var(--spectrum-actionbutton-selected-background-color-hover);
+      border-color: transparent;
+    }
+    &:active {
+      background-color: var(--spectrum-actionbutton-selected-background-color-down);
+      border-color: transparent;
+    }
+    &:focus-ring {
+      background-color: var(--spectrum-actionbutton-selected-background-color-focus);
+      border-color: transparent;
+    }
+
+    &.spectrum-ActionButton--emphasized {
+      border-color: transparent;
+      background-color: var(--spectrum-actionbutton-selected-background-color);
+      &:hover {
+        background-color: var(--spectrum-actionbutton-emphasized-selected-background-color-hover);
+        border-color: transparent;
+      }
+      &:active {
+        background-color: var(--spectrum-actionbutton-emphasized-selected-background-color-down);
+        border-color: transparent;
+      }
+      &:focus-ring {
+        background-color: var(--spectrum-actionbutton-emphasized-selected-background-color-focus);
+        border-color: transparent;
+      }
+    }
+  }
+}
+
+.spectrum-ActionButton--quiet {
+  background-color: var(--spectrum-actionbutton-quiet-background-color);
+  border-color: transparent;
+
+  &:hover {
+    background-color: var(--spectrum-actionbutton-quiet-background-color-hover);
+    border-color: transparent;
+  }
+  &:active {
+    background-color: var(--spectrum-actionbutton-quiet-background-color-down);
+    border-color: transparent;
+  }
+  &:focus-ring {
+    background-color: var(--spectrum-actionbutton-quiet-background-color-focus);
+    border-color: transparent;
+  }
 }
 
 a.spectrum-ActionButton {
@@ -96,6 +216,7 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-ActionButton-icon {
+  color: inherit;
   width: var(--spectrum-actionbutton-icon-size);
   height: var(--spectrum-actionbutton-icon-size);
 
@@ -118,6 +239,7 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-ActionButton-label {
+  color: inherit;
   @inherit: %spectrum-ButtonLabel;
 
   font-size: var(--spectrum-actionbutton-font-size);
@@ -128,6 +250,7 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-ActionButton-hold {
+  color: inherit;
   position: absolute;
   inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
   inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
diff --git a/components/actionbutton/skin.css b/components/actionbutton/skin.css
index cd8c8cbfeca..082e13b1d47 100644
--- a/components/actionbutton/skin.css
+++ b/components/actionbutton/skin.css
@@ -10,267 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-.spectrum-ActionButton {
-  /* Overridden because of the way we draw focus rings */
-  --spectrum-actionbutton-m-quiet-textonly-border-size-key-focus: 1px;
-}
-
-.spectrum-ActionButton {
-  background-color: var(--spectrum-actionbutton-m-textonly-background-color);
-  border-color: var(--spectrum-actionbutton-m-textonly-border-color);
-  color: var(--spectrum-actionbutton-m-textonly-text-color);
-
-  .spectrum-Icon {
-    color: var(--spectrum-actionbutton-m-texticon-icon-color);
-  }
-
-  .spectrum-ActionButton-hold {
-    color: var(--spectrum-actionbutton-m-textonly-hold-icon-color);
-  }
-
-  &:hover {
-    background-color: var(--spectrum-actionbutton-m-textonly-background-color-hover);
-    border-color: var(--spectrum-actionbutton-m-textonly-border-color-hover);
-    color: var(--spectrum-actionbutton-m-textonly-text-color-hover);
-
-    .spectrum-Icon {
-      color: var(--spectrum-actionbutton-m-texticon-icon-color-hover);
-    }
-
-    .spectrum-ActionButton-hold {
-      color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-hover);
-    }
-  }
-
-  &:focus-ring {
-    background-color: var(--spectrum-actionbutton-m-textonly-background-color-key-focus);
-    border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus);
-    color: var(--spectrum-actionbutton-m-textonly-text-color-key-focus);
-
-    &:active {
-      border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus);
-    }
-
-    .spectrum-Icon {
-      color: var(--spectrum-actionbutton-m-texticon-icon-color-key-focus);
-    }
-
-    .spectrum-ActionButton-hold {
-      color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-key-focus);
-    }
-  }
-
-  &:active {
-    background-color: var(--spectrum-actionbutton-m-textonly-background-color-down);
-    border-color: var(--spectrum-actionbutton-m-textonly-border-color-down);
-    color: var(--spectrum-actionbutton-m-textonly-text-color-down);
-
-    .spectrum-ActionButton-hold {
-      color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-down);
-    }
-  }
-
-  &:disabled,
-  &.is-disabled {
-    background-color: var(--spectrum-actionbutton-m-textonly-background-color-disabled);
-    border-color: var(--spectrum-actionbutton-m-textonly-border-color-disabled);
-    color: var(--spectrum-actionbutton-m-textonly-text-color-disabled);
-
-    .spectrum-Icon {
-      color: var(--spectrum-actionbutton-m-texticon-icon-color-disabled);
-    }
-
-    .spectrum-ActionButton-hold {
-      color: var(--spectrum-actionbutton-m-textonly-hold-icon-color-disabled);
-    }
-  }
-
-  &.is-selected {
-    background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected);
-    border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected);
-    color: var(--spectrum-actionbutton-m-textonly-text-color-selected);
-
-    .spectrum-Icon {
-      color: var(--spectrum-actionbutton-m-texticon-icon-color-selected);
-    }
-
-    &:focus-ring {
-      background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-key-focus);
-      border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-key-focus);
-      color: var(--spectrum-actionbutton-m-textonly-text-color-selected-key-focus);
-
-      &:active {
-        border-color: var(--spectrum-actionbutton-m-textonly-border-color-key-focus);
-      }
-
-      .spectrum-Icon {
-        color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-key-focus);
-      }
-    }
-
-    &:hover {
-      background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-hover);
-      border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-hover);
-      color: var(--spectrum-actionbutton-m-textonly-text-color-selected-hover);
-
-      .spectrum-Icon {
-        color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-hover);
-      }
-    }
-
-    &:active {
-      background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-down);
-      border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-down);
-      color: var(--spectrum-actionbutton-m-textonly-text-color-selected-down);
-
-      .spectrum-Icon {
-        color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-down);
-      }
-    }
-
-    &:disabled,
-    &.is-disabled {
-      background-color: var(--spectrum-actionbutton-m-textonly-background-color-selected-disabled);
-      border-color: var(--spectrum-actionbutton-m-textonly-border-color-selected-disabled);
-      color: var(--spectrum-actionbutton-m-textonly-text-color-selected-disabled);
-
-      .spectrum-Icon {
-        color: var(--spectrum-actionbutton-m-texticon-icon-color-selected-disabled);
-      }
-    }
-  }
-}
-
-.spectrum-ActionButton--emphasized {
-  &.spectrum-ActionButton--quiet.is-selected,
-  &.is-selected {
-    background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected);
-    border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected);
-    color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected);
-
-    .spectrum-Icon {
-      color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected);
-    }
-
-    &:focus-ring {
-      background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-key-focus);
-      border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-key-focus);
-      color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-key-focus);
-
-      .spectrum-Icon {
-        color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-key-focus);
-      }
-    }
-
-    &:hover {
-      background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover);
-      border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover);
-      color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover);
-
-      .spectrum-Icon {
-        color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-hover);
-      }
-    }
-
-    &.is-active {
-      background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down);
-      border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down);
-      color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down);
-
-      .spectrum-Icon {
-        color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down);
-      }
-    }
-
-    &:disabled,
-    &.is-disabled {
-      background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled);
-      border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled);
-      color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled);
-
-      .spectrum-Icon {
-        color: var(--spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled);
-      }
-    }
-  }
-}
-
-.spectrum-ActionButton--quiet {
-  background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color);
-  border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color);
-  color: var(--spectrum-actionbutton-m-quiet-textonly-text-color);
-
-  &:hover {
-    background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-hover);
-    border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-hover);
-    color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-hover);
-  }
-
-  &:focus-ring {
-    background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-key-focus);
-    border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-key-focus);
-    color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-key-focus);
-  }
-
-  &:active {
-    background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-down);
-    border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-down);
-    color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-down);
-  }
-
-  &:disabled,
-  &.is-disabled {
-    background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-disabled);
-    border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-disabled);
-    color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-disabled);
-  }
-
-  &.is-selected {
-    background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected);
-    border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected);
-    color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected);
-
-    &:focus-ring {
-      background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-key-focus);
-      border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-key-focus);
-      color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-key-focus);
-    }
-
-    &:hover {
-      background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-hover);
-      border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-hover);
-      color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-hover);
-    }
-
-    &:active {
-      background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-down);
-      border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-down);
-      color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-down);
-    }
-
-    &:disabled,
-    &.is-disabled {
-      background-color: var(--spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled);
-      border-color: var(--spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled);
-      color: var(--spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled);
-    }
-  }
-}
-
-.spectrum-ActionButton--staticBlack,
-.spectrum-ActionButton--staticWhite {
-  /* required to make rgba() work with vars */
-  --spectrum-global-color-static-black-rgb: 0, 0, 0;
-  --spectrum-global-color-static-white-rgb: 255, 255, 255;
-  --spectrum-ActionButton-static-black-color: var(--spectrum-global-color-static-black);
-  --spectrum-ActionButton-static-white-color: var(--spectrum-global-color-static-white);
-
-  &.is-selected {
-    /* let selected styles get their color from parent elements */
-    color: inherit !important;
-  }
-}
-
 @media (forced-colors: active) {
   .spectrum-ActionButton {
     --spectrum-actionbutton-m-emphasized-texticon-icon-color: ButtonText;

From c862cb036a5b6fda8df5ae395ac15e5ec51e2ebe Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 09:26:27 -0700
Subject: [PATCH 04/23] chore: update tokens, fix misnamed var

---
 components/actionbutton/index.css  | 2 +-
 components/coretokens/package.json | 2 +-
 yarn.lock                          | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index f6816ed3788..80f69401551 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -28,7 +28,7 @@ governing permissions and limitations under the License.
   --spectrum-actionbutton-quiet-background-color-down: var(--spectrum-gray-200);
   --spectrum-actionbutton-quiet-background-color-focus: transparent;
 
-  --spectrum-actionbutton-content-color: var(--spectrum-neutral-content-color); /* todo: this may be named wrong */
+  --spectrum-actionbutton-content-color: var(--spectrum-neutral-content-color-default);
   --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover);
   --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
   --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
diff --git a/components/coretokens/package.json b/components/coretokens/package.json
index 910d46d36c8..e451af0bdc8 100644
--- a/components/coretokens/package.json
+++ b/components/coretokens/package.json
@@ -18,7 +18,7 @@
   "devDependencies": {
     "gulp": "^4.0.0",
     "gulp-concat": "^2.6.1",
-    "@adobe/spectrum-tokens": "^12.0.0-beta.17",
+    "@adobe/spectrum-tokens": "^12.0.0-beta.18",
     "style-dictionary": "^3.7.0",
     "style-dictionary-sets": "^1.4.1"
   },
diff --git a/yarn.lock b/yarn.lock
index 7ab7ce54c5a..cb075c6c8fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22,10 +22,10 @@
   resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-11.7.0.tgz#5dba7fe26b15fa4e04e99d29c77c0d376144997d"
   integrity sha512-ljefOVVAHVAo5gcWCxr7VPlINgaK3Fo5AMDtGeQM1mgWOPSf6Q6FTdGRPRhfQHgxHZLPp4ieA3Yt0WPOykdqdw==
 
-"@adobe/spectrum-tokens@^12.0.0-beta.17":
-  version "12.0.0-beta.18"
-  resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-12.0.0-beta.18.tgz#5650715c79fd51b8389f6fde81c05ac08d706292"
-  integrity sha512-hPZDPOpkIMeGStLUD/Khuz4yl9Pq8YUYLbns3BAcwOfNK1t35AM4AKVNfENyklIi0PVDMueCFKAls8q42s00zw==
+"@adobe/spectrum-tokens@^12.0.0-beta.18":
+  version "12.0.0-beta.20"
+  resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-12.0.0-beta.20.tgz#1b66558e281aa36386966f0bfc7a5457d57d5d2f"
+  integrity sha512-kjJ56k6GuXzi193soXO9zPIRU//FpCZn2rXEqWiiJqV/z5k9Uo8vhR9ma2jL/qNUEFgvuedRQmkW7sAk4jMb4g==
 
 "@babel/code-frame@^7.0.0":
   version "7.15.8"

From 877b90901baed58dae3359ada53f148bda7c64ac Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 10:22:38 -0700
Subject: [PATCH 05/23] feat: implement colors using core tokens and custom
 properties

---
 components/actionbutton/index.css | 293 +++++++++++++++++++-----------
 1 file changed, 190 insertions(+), 103 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 80f69401551..0e9066202fb 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -13,52 +13,193 @@ governing permissions and limitations under the License.
 @import "../commons/basebutton.css";
 
 .spectrum {
-  --spectrum-actionbutton-background-color: var(--spectrum-gray-75);
-  --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-50);
-  --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
-  --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-50);
-
-  --spectrum-actionbutton-border-color: var(--spectrum-gray-400);
-  --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
-  --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
-  --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
-
-  --spectrum-actionbutton-quiet-background-color: transparent;
-  --spectrum-actionbutton-quiet-background-color-hover: transparent;
-  --spectrum-actionbutton-quiet-background-color-down: var(--spectrum-gray-200);
-  --spectrum-actionbutton-quiet-background-color-focus: transparent;
-
-  --spectrum-actionbutton-content-color: var(--spectrum-neutral-content-color-default);
-  --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover);
-  --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
-  --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
-  --spectrum-actionbutton-selected-background-color: var(--spectrum-neutral-subdued-background-color-default);
-  --spectrum-actionbutton-selected-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
-  --spectrum-actionbutton-selected-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
-  --spectrum-actionbutton-selected-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-
-  --spectrum-actionbutton-emphasized-selected-background-color: var(--spectrum-accent-background-color-default);
-  --spectrum-actionbutton-emphasized-selected-background-color-hover: var(--spectrum-accent-background-color-hover);
-  --spectrum-actionbutton-emphasized-selected-background-color-down: var(--spectrum-accent-background-color-down);
-  --spectrum-actionbutton-emphasized-selected-background-color-focus: var(--spectrum-accent-background-color-key-focus);
+  .spectrum-ActionButton {
+    --spectrum-actionbutton-background-color: var(--spectrum-gray-75);
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-50);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-50);
+
+    --spectrum-actionbutton-border-color: var(--spectrum-gray-400);
+    --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
+    --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
+    --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
+
+    --spectrum-actionbutton-content-color: var(--spectrum-neutral-content-color-default);
+    --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover);
+    --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
+    --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+    --spectrum-actionbutton-background-color-disabled: transparent;
+    --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
+    --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
+
+    &.spectrum-ActionButton--quiet {
+      --spectrum-actionbutton-background-color: transparent;
+      --spectrum-actionbutton-background-color-hover: transparent;
+      --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+      --spectrum-actionbutton-background-color-focus: transparent;
+
+      --spectrum-actionbutton-background-color-disabled: transparent;
+    }
+
+    &.is-selected {
+      --spectrum-actionbutton-background-color: var(--spectrum-neutral-subdued-background-color-default);
+      --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
+      --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
+      --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
+
+      --spectrum-actionbutton-content-color: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-down: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
+
+      --spectrum-actionbutton-border-color: transparent;
+      --spectrum-actionbutton-border-color-hover: transparent;
+      --spectrum-actionbutton-border-color-down: transparent;
+      --spectrum-actionbutton-border-color-focus: transparent;
+
+      &.spectrum-ActionButton--emphaszied {
+        --spectrum-actionbutton-background-color: var(--spectrum-accent-background-color-default);
+        --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover);
+        --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down);
+        --spectrum-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus);
+      }
+    }
+
+    &.spectrum-ActionButton--staticBlack,
+    &.spectrum-ActionButton--staticWhite {
+      &.spectrum-ActionButton--quiet {
+        --spectrum-actionbutton-border-color: transparent;
+        --spectrum-actionbutton-border-color-hover: transparent;
+        --spectrum-actionbutton-border-color-down: transparent;
+        --spectrum-actionbutton-border-color-focus: transparent;
+
+        --spectrum-actionbutton-border-color-disabled: transparent;
+      }
+    }
+
+    &.spectrum-ActionButton--staticBlack {
+      --spectrum-actionbutton-content-color: var(--spectrum-black);
+      --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
+      --spectrum-actionbutton-content-color-down: var(--spectrum-black);
+      --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
+
+      --spectrum-actionbutton-background-color: transparent;
+      --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
+      --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
+      --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
+
+      --spectrum-actionbutton-border-color: var(--spectrum-transparent-black-400);
+      --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500);
+      --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600);
+      --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500);
+
+      --spectrum-actionbutton-focus-ring-color: var(--spectrum-black);
+
+      --spectrum-actionbutton-background-color-disabled: transparent;
+      --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
+      --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
+
+      &.is-selected {
+        --spectrum-actionbutton-background-color: var(--spectrum-transparent-black-800);
+        --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900);
+        --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
+        --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
+
+        --spectrum-actionbutton-content-color: var(--spectrum-white);
+        --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
+        --spectrum-actionbutton-content-color-down: var(--spectrum-white);
+        --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
+      }
+    }
+
+    &.spectrum-ActionButton--staticWhite {
+      --spectrum-actionbutton-content-color: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-down: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
+
+      --spectrum-actionbutton-background-color: transparent;
+      --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
+      --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
+      --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
+
+      --spectrum-actionbutton-border-color: var(--spectrum-transparent-white-400);
+      --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500);
+      --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600);
+      --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500);
+
+      --spectrum-actionbutton-focus-ring-color: var(--spectrum-white);
+
+      --spectrum-actionbutton-background-color-disabled: transparent;
+      --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
+      --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
+
+      &.is-selected {
+        --spectrum-actionbutton-background-color: var(--spectrum-transparent-white-800);
+        --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900);
+        --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900);
+        --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900);
+
+        --spectrum-actionbutton-content-color: var(--spectrum-black);
+        --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
+        --spectrum-actionbutton-content-color-down: var(--spectrum-black);
+        --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
+      }
+    }
+  }
 }
 
 .spectrum--express {
-  --spectrum-actionbutton-background-color: var(--spectrum-gray-200);
-  --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
-  --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
-  --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
-
-  --spectrum-actionbutton-border-color: transparent;
-  --spectrum-actionbutton-border-color-hover: transparent;
-  --spectrum-actionbutton-border-color-down: transparent;
-  --spectrum-actionbutton-border-color-focus: transparent;
-
-  --spectrum-actionbutton-selected-background-color: var(--spectrum-neutral-background-color-default);
-  --spectrum-actionbutton-selected-background-color-hover: var(--spectrum-neutral-background-color-hover);
-  --spectrum-actionbutton-selected-background-color-down: var(--spectrum-neutral-background-color-down);
-  --spectrum-actionbutton-selected-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
+  .spectrum-ActionButton {
+    --spectrum-actionbutton-background-color: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
+
+    --spectrum-actionbutton-border-color: transparent;
+    --spectrum-actionbutton-border-color-hover: transparent;
+    --spectrum-actionbutton-border-color-down: transparent;
+    --spectrum-actionbutton-border-color-focus: transparent;
+
+    --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+    --spectrum-actionbutton-border-color-disabled: transparent;
+    --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
+
+    &.is-selected {
+      --spectrum-actionbutton-background-color: var(--spectrum-neutral-background-color-default);
+      --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-hover);
+      --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-down);
+      --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
+
+      --spectrum-actionbutton-content-color: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-down: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
+    }
+
+    &.spectrum-ActionButton--staticBlack,
+    &.spectrum-ActionButton--staticWhite {
+      --spectrum-actionbutton-border-color: transparent;
+      --spectrum-actionbutton-border-color-hover: transparent;
+      --spectrum-actionbutton-border-color-down: transparent;
+      --spectrum-actionbutton-border-color-focus: transparent;
+    }
+
+    &.spectrum-ActionButton--staticBlack {
+      --spectrum-actionbutton-background-color: var(--spectrum-transparent-black-200);
+      --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
+      --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
+      --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
+    }
+
+    &.spectrum-ActionButton--staticWhite {
+      --spectrum-actionbutton-background-color: var(--spectrum-transparent-white-200);
+      --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
+      --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
+      --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
+    }
+  }
 }
 
 .spectrum-ActionButton--sizeS {
@@ -157,57 +298,11 @@ governing permissions and limitations under the License.
     border-color: var(--spectrum-actionbutton-border-color-focus);
     color: var(--spectrum-actionbutton-content-color-focus);
   }
-
-  &.is-selected {
-    border-color: transparent;
-    background-color: var(--spectrum-actionbutton-selected-background-color);
-    &:hover {
-      background-color: var(--spectrum-actionbutton-selected-background-color-hover);
-      border-color: transparent;
-    }
-    &:active {
-      background-color: var(--spectrum-actionbutton-selected-background-color-down);
-      border-color: transparent;
-    }
-    &:focus-ring {
-      background-color: var(--spectrum-actionbutton-selected-background-color-focus);
-      border-color: transparent;
-    }
-
-    &.spectrum-ActionButton--emphasized {
-      border-color: transparent;
-      background-color: var(--spectrum-actionbutton-selected-background-color);
-      &:hover {
-        background-color: var(--spectrum-actionbutton-emphasized-selected-background-color-hover);
-        border-color: transparent;
-      }
-      &:active {
-        background-color: var(--spectrum-actionbutton-emphasized-selected-background-color-down);
-        border-color: transparent;
-      }
-      &:focus-ring {
-        background-color: var(--spectrum-actionbutton-emphasized-selected-background-color-focus);
-        border-color: transparent;
-      }
-    }
-  }
-}
-
-.spectrum-ActionButton--quiet {
-  background-color: var(--spectrum-actionbutton-quiet-background-color);
-  border-color: transparent;
-
-  &:hover {
-    background-color: var(--spectrum-actionbutton-quiet-background-color-hover);
-    border-color: transparent;
-  }
-  &:active {
-    background-color: var(--spectrum-actionbutton-quiet-background-color-down);
-    border-color: transparent;
-  }
-  &:focus-ring {
-    background-color: var(--spectrum-actionbutton-quiet-background-color-focus);
-    border-color: transparent;
+  &:disabled,
+  &.is-disabled {
+    background-color: var(--spectrum-actionbutton-background-color-disabled);
+    border-color: var(--spectrum-actionbutton-border-color-disabled);
+    color: var(--spectrum-actionbutton-content-color-disabled);
   }
 }
 
@@ -283,12 +378,4 @@ a.spectrum-ActionButton {
       box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-ring-thickness) var(--spectrum-actionbutton-focus-ring-color);
     }
   }
-}
-
-.spectrum-ActionButton--staticWhite {
-  --spectrum-actionbutton-focus-ring-color: var(--spectrum-white);
-}
-
-.spectrum-ActionButton--staticBlack {
-  --spectrum-actionbutton-focus-ring-color: var(--spectrum-black);
-}
+}
\ No newline at end of file

From ad60a1c19876f7e7c83f3b0249dbf09f412f4583 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 10:27:44 -0700
Subject: [PATCH 06/23] refactor: add -default

---
 components/actionbutton/index.css | 58 +++++++++++++++----------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 0e9066202fb..7b16326a9ad 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -14,17 +14,17 @@ governing permissions and limitations under the License.
 
 .spectrum {
   .spectrum-ActionButton {
-    --spectrum-actionbutton-background-color: var(--spectrum-gray-75);
+    --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75);
     --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-50);
     --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
     --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-50);
 
-    --spectrum-actionbutton-border-color: var(--spectrum-gray-400);
+    --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
     --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
     --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
     --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
 
-    --spectrum-actionbutton-content-color: var(--spectrum-neutral-content-color-default);
+    --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default);
     --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover);
     --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
     --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
@@ -34,7 +34,7 @@ governing permissions and limitations under the License.
     --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
 
     &.spectrum-ActionButton--quiet {
-      --spectrum-actionbutton-background-color: transparent;
+      --spectrum-actionbutton-background-color-default: transparent;
       --spectrum-actionbutton-background-color-hover: transparent;
       --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
       --spectrum-actionbutton-background-color-focus: transparent;
@@ -43,23 +43,23 @@ governing permissions and limitations under the License.
     }
 
     &.is-selected {
-      --spectrum-actionbutton-background-color: var(--spectrum-neutral-subdued-background-color-default);
+      --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
       --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
       --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
       --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
 
-      --spectrum-actionbutton-content-color: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-default: var(--spectrum-white);
       --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
       --spectrum-actionbutton-content-color-down: var(--spectrum-white);
       --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
 
-      --spectrum-actionbutton-border-color: transparent;
+      --spectrum-actionbutton-border-color-default: transparent;
       --spectrum-actionbutton-border-color-hover: transparent;
       --spectrum-actionbutton-border-color-down: transparent;
       --spectrum-actionbutton-border-color-focus: transparent;
 
       &.spectrum-ActionButton--emphaszied {
-        --spectrum-actionbutton-background-color: var(--spectrum-accent-background-color-default);
+        --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default);
         --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover);
         --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down);
         --spectrum-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus);
@@ -69,7 +69,7 @@ governing permissions and limitations under the License.
     &.spectrum-ActionButton--staticBlack,
     &.spectrum-ActionButton--staticWhite {
       &.spectrum-ActionButton--quiet {
-        --spectrum-actionbutton-border-color: transparent;
+        --spectrum-actionbutton-border-color-default: transparent;
         --spectrum-actionbutton-border-color-hover: transparent;
         --spectrum-actionbutton-border-color-down: transparent;
         --spectrum-actionbutton-border-color-focus: transparent;
@@ -79,17 +79,17 @@ governing permissions and limitations under the License.
     }
 
     &.spectrum-ActionButton--staticBlack {
-      --spectrum-actionbutton-content-color: var(--spectrum-black);
+      --spectrum-actionbutton-content-color-default: var(--spectrum-black);
       --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
       --spectrum-actionbutton-content-color-down: var(--spectrum-black);
       --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
 
-      --spectrum-actionbutton-background-color: transparent;
+      --spectrum-actionbutton-background-color-default: transparent;
       --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
       --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
       --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
 
-      --spectrum-actionbutton-border-color: var(--spectrum-transparent-black-400);
+      --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400);
       --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500);
       --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600);
       --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500);
@@ -101,12 +101,12 @@ governing permissions and limitations under the License.
       --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color);
 
       &.is-selected {
-        --spectrum-actionbutton-background-color: var(--spectrum-transparent-black-800);
+        --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-800);
         --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900);
         --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
         --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
 
-        --spectrum-actionbutton-content-color: var(--spectrum-white);
+        --spectrum-actionbutton-content-color-default: var(--spectrum-white);
         --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
         --spectrum-actionbutton-content-color-down: var(--spectrum-white);
         --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
@@ -114,17 +114,17 @@ governing permissions and limitations under the License.
     }
 
     &.spectrum-ActionButton--staticWhite {
-      --spectrum-actionbutton-content-color: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-default: var(--spectrum-white);
       --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
       --spectrum-actionbutton-content-color-down: var(--spectrum-white);
       --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
 
-      --spectrum-actionbutton-background-color: transparent;
+      --spectrum-actionbutton-background-color-default: transparent;
       --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
       --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
       --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
 
-      --spectrum-actionbutton-border-color: var(--spectrum-transparent-white-400);
+      --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400);
       --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500);
       --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600);
       --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500);
@@ -136,12 +136,12 @@ governing permissions and limitations under the License.
       --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color);
 
       &.is-selected {
-        --spectrum-actionbutton-background-color: var(--spectrum-transparent-white-800);
+        --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-800);
         --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900);
         --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900);
         --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900);
 
-        --spectrum-actionbutton-content-color: var(--spectrum-black);
+        --spectrum-actionbutton-content-color-default: var(--spectrum-black);
         --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
         --spectrum-actionbutton-content-color-down: var(--spectrum-black);
         --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
@@ -152,12 +152,12 @@ governing permissions and limitations under the License.
 
 .spectrum--express {
   .spectrum-ActionButton {
-    --spectrum-actionbutton-background-color: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200);
     --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
     --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
     --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
 
-    --spectrum-actionbutton-border-color: transparent;
+    --spectrum-actionbutton-border-color-default: transparent;
     --spectrum-actionbutton-border-color-hover: transparent;
     --spectrum-actionbutton-border-color-down: transparent;
     --spectrum-actionbutton-border-color-focus: transparent;
@@ -167,12 +167,12 @@ governing permissions and limitations under the License.
     --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
 
     &.is-selected {
-      --spectrum-actionbutton-background-color: var(--spectrum-neutral-background-color-default);
+      --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-background-color-default);
       --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-hover);
       --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-down);
       --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
 
-      --spectrum-actionbutton-content-color: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-default: var(--spectrum-white);
       --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
       --spectrum-actionbutton-content-color-down: var(--spectrum-white);
       --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
@@ -180,21 +180,21 @@ governing permissions and limitations under the License.
 
     &.spectrum-ActionButton--staticBlack,
     &.spectrum-ActionButton--staticWhite {
-      --spectrum-actionbutton-border-color: transparent;
+      --spectrum-actionbutton-border-color-default: transparent;
       --spectrum-actionbutton-border-color-hover: transparent;
       --spectrum-actionbutton-border-color-down: transparent;
       --spectrum-actionbutton-border-color-focus: transparent;
     }
 
     &.spectrum-ActionButton--staticBlack {
-      --spectrum-actionbutton-background-color: var(--spectrum-transparent-black-200);
+      --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200);
       --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
       --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
       --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300);
     }
 
     &.spectrum-ActionButton--staticWhite {
-      --spectrum-actionbutton-background-color: var(--spectrum-transparent-white-200);
+      --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200);
       --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
       --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
       --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300);
@@ -279,9 +279,9 @@ governing permissions and limitations under the License.
   padding-inline-start: var(--spectrum-actionbutton-edge-to-text);
   padding-inline-end: var(--spectrum-actionbutton-edge-to-text);
 
-  background-color: var(--spectrum-actionbutton-background-color);
-  border-color: var(--spectrum-actionbutton-border-color);
-  color: var(--spectrum-actionbutton-content-color);
+  background-color: var(--spectrum-actionbutton-background-color-default);
+  border-color: var(--spectrum-actionbutton-border-color-default);
+  color: var(--spectrum-actionbutton-content-color-default);
 
   &:hover {
     background-color: var(--spectrum-actionbutton-background-color-hover);

From 9e0c23e4bc4d4229b65de5c851d0e5cd64581d66 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 12:04:43 -0700
Subject: [PATCH 07/23] feat: add custom properties API

---
 components/actionbutton/index.css             | 104 ++++++++++++------
 .../actionbutton/metadata/actionbutton.yml    |  67 +++++++++++
 2 files changed, 136 insertions(+), 35 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 7b16326a9ad..fb94265cc30 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -12,6 +12,39 @@ governing permissions and limitations under the License.
 
 @import "../commons/basebutton.css";
 
+/**
+.spectrum-ActionButton {
+  --custom-actionbutton-background-color-default: x;
+  --custom-actionbutton-background-color-hover: x;
+  --custom-actionbutton-background-color-down: x;
+  --custom-actionbutton-background-color-focus: x;
+  --custom-actionbutton-background-color-disabled: x;
+
+  --custom-actionbutton-border-color-default: x;
+  --custom-actionbutton-border-color-hover: x;
+  --custom-actionbutton-border-color-down: x;
+  --custom-actionbutton-border-color-focus: x;
+  --custom-actionbutton-border-color-disabled: x;
+
+  --custom-actionbutton-content-color-default: x;
+  --custom-actionbutton-content-color-hover: x;
+  --custom-actionbutton-content-color-down: x;
+  --custom-actionbutton-content-color-focus: x;
+  --custom-actionbutton-content-color-disabled: x;
+
+  --custom-actionbutton-min-width: x;
+  --custom-actionbutton-height: x;
+
+  --custom-actionbutton-icon-size: x;
+  --custom-actionbutton-font-size: x;
+  --custom-actionbutton-text-to-visual: x;
+  --custom-actionbutton-edge-to-hold-icon: x;
+  --custom-actionbutton-edge-to-visual: x;
+  --custom-actionbutton-edge-to-text: x;
+  --custom-actionbutton-edge-to-visual-only: x;
+}
+*/
+
 .spectrum {
   .spectrum-ActionButton {
     --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75);
@@ -255,6 +288,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-ActionButton {
+  --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
   --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100);
   --spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
 
@@ -270,39 +304,39 @@ governing permissions and limitations under the License.
   padding-inline-start: 0;
   padding-inline-end: 0;
 
-  min-inline-size: var(--spectrum-actionbutton-min-width);
-  height: var(--spectrum-actionbutton-height);
-  border-radius: var(--spectrum-actionbutton-border-radius);
-  border-width: var(--spectrum-actionbutton-border-width);
+  min-inline-size: var(--custom-actionbutton-min-width, var(--spectrum-actionbutton-min-width));
+  height: var(--custom-actionbutton-height, var(--spectrum-actionbutton-height));
+  border-radius: var(--custom-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius));
+  border-width: var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width));
 
   /* Start with text-only padding */
-  padding-inline-start: var(--spectrum-actionbutton-edge-to-text);
-  padding-inline-end: var(--spectrum-actionbutton-edge-to-text);
+  padding-inline-start: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text));
+  padding-inline-end: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text));
 
-  background-color: var(--spectrum-actionbutton-background-color-default);
-  border-color: var(--spectrum-actionbutton-border-color-default);
-  color: var(--spectrum-actionbutton-content-color-default);
+  background-color: var(--custom-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default));
+  border-color: var(--custom-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default));
+  color: var(--custom-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default));
 
   &:hover {
-    background-color: var(--spectrum-actionbutton-background-color-hover);
-    border-color: var(--spectrum-actionbutton-border-color-hover);
-    color: var(--spectrum-actionbutton-content-color-hover);
+    background-color: var(--custom-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover));
+    border-color: var(--custom-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover));
+    color: var(--custom-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover));
   }
   &:active {
-    background-color: var(--spectrum-actionbutton-background-color-down);
-    border-color: var(--spectrum-actionbutton-border-color-down);
-    color: var(--spectrum-actionbutton-content-color-down);
+    background-color: var(--custom-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down));
+    border-color: var(--custom-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down));
+    color: var(--custom-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down));
   }
   &:focus-ring {
-    background-color: var(--spectrum-actionbutton-background-color-focus);
-    border-color: var(--spectrum-actionbutton-border-color-focus);
-    color: var(--spectrum-actionbutton-content-color-focus);
+    background-color: var(--custom-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus));
+    border-color: var(--custom-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus));
+    color: var(--custom-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus));
   }
   &:disabled,
   &.is-disabled {
-    background-color: var(--spectrum-actionbutton-background-color-disabled);
-    border-color: var(--spectrum-actionbutton-border-color-disabled);
-    color: var(--spectrum-actionbutton-content-color-disabled);
+    background-color: var(--custom-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));
+    border-color: var(--custom-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled));
+    color: var(--custom-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled));
   }
 }
 
@@ -312,32 +346,32 @@ a.spectrum-ActionButton {
 
 .spectrum-ActionButton-icon {
   color: inherit;
-  width: var(--spectrum-actionbutton-icon-size);
-  height: var(--spectrum-actionbutton-icon-size);
+  width: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
+  height: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
 
   & + .spectrum-ActionButton-label {
     /* Have gap on on the left */
-    padding-inline-start: var(--spectrum-actionbutton-text-to-visual);
+    padding-inline-start: var(--custom-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual));
 
     /* Have no padding on the right (it's built into the element) */
     padding-inline-end: 0;
   }
 
-  margin-inline-start: calc(-1 * (var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual)));
+  margin-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual))));
 }
 
 .spectrum-ActionButton-hold + .spectrum-ActionButton-icon,
 .spectrum-ActionButton-icon:only-child {
   /* Use icon-only padding, subtracted from the default text-only padding */
-  margin-inline-start: calc(-1 * (var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only)));
-  margin-inline-end: calc(-1 * (var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only)));
+  margin-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))));
+  margin-inline-end: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))));
 }
 
 .spectrum-ActionButton-label {
   color: inherit;
   @inherit: %spectrum-ButtonLabel;
 
-  font-size: var(--spectrum-actionbutton-font-size);
+  font-size: var(--custom-actionbutton-font-size, var(--spectrum-actionbutton-font-size));
 
   white-space: nowrap;
   overflow: hidden;
@@ -347,8 +381,8 @@ a.spectrum-ActionButton {
 .spectrum-ActionButton-hold {
   color: inherit;
   position: absolute;
-  inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
-  inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
+  inset-inline-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width)));
+  inset-block-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width)));
 
   transform: logical rotate(0deg);
 }
@@ -356,7 +390,7 @@ a.spectrum-ActionButton {
 
 /* special cases for focus-ring */
 .spectrum-ActionButton {
-  transition: border-color var(--spectrum-animation-duration-100) ease-in-out;
+  transition: border-color var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
 
   &:after {
     pointer-events: none;
@@ -366,16 +400,16 @@ a.spectrum-ActionButton {
     right: 0;
     bottom: 0;
     top: 0;
-    margin: calc((var(--spectrum-actionbutton-focus-ring-gap) + var(--spectrum-actionbutton-border-width)) * -1);
-    border-radius: var(--spectrum-actionbutton-focus-ring-border-radius);
-    transition: box-shadow var(--spectrum-animation-duration-100) ease-in-out;
+    margin: calc((var(--custom-actionbutton-focus-ring-gap, var(--spectrum-actionbutton-focus-ring-gap)) + var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1);
+    border-radius: var(--custom-actionbutton-focus-ring-border-radius, var(--spectrum-actionbutton-focus-ring-border-radius));
+    transition: box-shadow var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
   }
 
   &:focus-ring {
     box-shadow: none !important;
 
     &:after {
-      box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-ring-thickness) var(--spectrum-actionbutton-focus-ring-color);
+      box-shadow: 0 0 0 var(--custom-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--custom-actionbutton-focus-ring-color, var(--spectrum-actionbutton-focus-ring-color));
     }
   }
 }
\ No newline at end of file
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml
index dedcbf6d3f5..0406be89b4f 100644
--- a/components/actionbutton/metadata/actionbutton.yml
+++ b/components/actionbutton/metadata/actionbutton.yml
@@ -6,6 +6,38 @@ description: |
   - If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element.
   - If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element.
 sections:
+  - name: Custom Properties API
+    description: |
+      Define a subset of the following properties on your own class, such as `.custom-ActionButton`, to customize ActionButton.
+
+      These properties override all API options, but can be layered on top of them.
+
+      | Custom property                                   |
+      | ------------------------------------------------- |
+      |  `--custom-actionbutton-background-color-default` |
+      |  `--custom-actionbutton-background-color-hover` |
+      |  `--custom-actionbutton-background-color-down` |
+      |  `--custom-actionbutton-background-color-focus` |
+      |  `--custom-actionbutton-background-color-disabled` |
+      |  `--custom-actionbutton-border-color-default` |
+      |  `--custom-actionbutton-border-color-hover` |
+      |  `--custom-actionbutton-border-color-down` |
+      |  `--custom-actionbutton-border-color-focus` |
+      |  `--custom-actionbutton-border-color-disabled` |
+      |  `--custom-actionbutton-content-color-default` |
+      |  `--custom-actionbutton-content-color-hover` |
+      |  `--custom-actionbutton-content-color-down` |
+      |  `--custom-actionbutton-content-color-focus` |
+      |  `--custom-actionbutton-content-color-disabled` |
+      |  `--custom-actionbutton-min-width` |
+      |  `--custom-actionbutton-height` |
+      |  `--custom-actionbutton-icon-size` |
+      |  `--custom-actionbutton-font-size` |
+      |  `--custom-actionbutton-text-to-visual` |
+      |  `--custom-actionbutton-edge-to-hold-icon` |
+      |  `--custom-actionbutton-edge-to-visual` |
+      |  `--custom-actionbutton-edge-to-text` |
+      |  `--custom-actionbutton-edge-to-visual-only` |
   - name: Migration Guide
     description: |
       ### Action Button now required a class on its icon
@@ -1224,3 +1256,38 @@ examples:
           </div>
         </div>
       </div>
+
+  - id: actionbutton-api
+    name: Customized
+    markup: |
+      <style type="text/css">
+        .custom-ActionButton {
+          --custom-actionbutton-background-color-default: var(--spectrum-orange-200);
+          --custom-actionbutton-background-color-hover: var(--spectrum-orange-100);
+          --custom-actionbutton-background-color-down: var(--spectrum-orange-400);
+          --custom-actionbutton-background-color-focus: var(--spectrum-orange-100);
+
+          --custom-actionbutton-border-color-default: var(--spectrum-orange-400);
+          --custom-actionbutton-border-color-hover: var(--spectrum-orange-500);
+          --custom-actionbutton-border-color-down: var(--spectrum-orange-600);
+          --custom-actionbutton-border-color-focus: var(--spectrum-orange-500);
+
+          --custom-actionbutton-content-color-default: var(--spectrum-orange-1000);
+          --custom-actionbutton-content-color-hover: var(--spectrum-orange-1100);
+          --custom-actionbutton-content-color-down: var(--spectrum-orange-1000);
+          --custom-actionbutton-content-color-focus: var(--spectrum-orange-1300);
+
+          --custom-actionbutton-min-width: 24px;
+          --custom-actionbutton-height: 44px;
+
+          --custom-actionbutton-icon-size: 24px;
+          --custom-actionbutton-font-size: 26px;
+        }
+      </style>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM custom-ActionButton">
+        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>

From 0d32da921edd5bca1de8e262d2b4d87007abc0a0 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 12:04:51 -0700
Subject: [PATCH 08/23] chore: don't warn for locally defined custom properties
 API

---
 tools/component-builder/css/vars.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tools/component-builder/css/vars.js b/tools/component-builder/css/vars.js
index 9c7e6280d35..325093b074b 100644
--- a/tools/component-builder/css/vars.js
+++ b/tools/component-builder/css/vars.js
@@ -59,8 +59,8 @@ function bakeVars() {
       if (varName.indexOf('spectrum-global') !== -1) {
         logger.warn(`⚠️  ${pkg.name} directly uses global variable ${varName}`);
       }
-      else if (!allVars[varName]) {
-        if (!varName.startsWith('--custom') && componentVars.indexOf(varName) === -1) {
+      else if (!allVars[varName] && !varName.startsWith('--custom')) {
+        if (componentVars.indexOf(varName) === -1) {
           errors.push(`${pkg.name} uses undefined variable ${varName}`);
         }
         else {

From 80e39ea20515bc352541ac0104df0a07953f9392 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 12:54:22 -0700
Subject: [PATCH 09/23] fix: add missing focus-ring-color token, fix emphasized
 speiling

---
 components/actionbutton/index.css                 | 4 +++-
 components/actionbutton/metadata/actionbutton.yml | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index fb94265cc30..ffbbc459671 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -32,6 +32,8 @@ governing permissions and limitations under the License.
   --custom-actionbutton-content-color-focus: x;
   --custom-actionbutton-content-color-disabled: x;
 
+  --custom-actionbutton-focus-ring-color: x;
+
   --custom-actionbutton-min-width: x;
   --custom-actionbutton-height: x;
 
@@ -91,7 +93,7 @@ governing permissions and limitations under the License.
       --spectrum-actionbutton-border-color-down: transparent;
       --spectrum-actionbutton-border-color-focus: transparent;
 
-      &.spectrum-ActionButton--emphaszied {
+      &.spectrum-ActionButton--emphasized {
         --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default);
         --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover);
         --spectrum-actionbutton-background-color-down: var(--spectrum-accent-background-color-down);
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml
index 0406be89b4f..e05409504d1 100644
--- a/components/actionbutton/metadata/actionbutton.yml
+++ b/components/actionbutton/metadata/actionbutton.yml
@@ -29,6 +29,7 @@ sections:
       |  `--custom-actionbutton-content-color-down` |
       |  `--custom-actionbutton-content-color-focus` |
       |  `--custom-actionbutton-content-color-disabled` |
+      |  `--custom-actionbutton-focus-ring-color` |
       |  `--custom-actionbutton-min-width` |
       |  `--custom-actionbutton-height` |
       |  `--custom-actionbutton-icon-size` |
@@ -1277,6 +1278,8 @@ examples:
           --custom-actionbutton-content-color-down: var(--spectrum-orange-1000);
           --custom-actionbutton-content-color-focus: var(--spectrum-orange-1300);
 
+          --custom-actionbutton-focus-ring-color: var(--spectrum-orange-800);
+
           --custom-actionbutton-min-width: 24px;
           --custom-actionbutton-height: 44px;
 

From bd8a16583f92c75895d06484fad77fb5018c16c8 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 13:12:29 -0700
Subject: [PATCH 10/23] fix: disabled background color, emphasized override

---
 components/actionbutton/index.css             | 23 ++++++++++---------
 .../actionbutton/metadata/actionbutton.yml    | 10 ++++----
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index ffbbc459671..ccec32dec1e 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -33,6 +33,7 @@ governing permissions and limitations under the License.
   --custom-actionbutton-content-color-disabled: x;
 
   --custom-actionbutton-focus-ring-color: x;
+  --custom-actionbutton-static-content-color: x;
 
   --custom-actionbutton-min-width: x;
   --custom-actionbutton-height: x;
@@ -64,8 +65,8 @@ governing permissions and limitations under the License.
     --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
     --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
 
-    --spectrum-actionbutton-background-color-disabled: transparent;
-    --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
+    --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+    --spectrum-actionbutton-border-color-disabled: transparent;
     --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
 
     &.spectrum-ActionButton--quiet {
@@ -141,10 +142,10 @@ governing permissions and limitations under the License.
         --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
         --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
 
-        --spectrum-actionbutton-content-color-default: var(--spectrum-white);
-        --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
-        --spectrum-actionbutton-content-color-down: var(--spectrum-white);
-        --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
+        --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
+        --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
+        --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
+        --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
       }
     }
 
@@ -176,10 +177,10 @@ governing permissions and limitations under the License.
         --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900);
         --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900);
 
-        --spectrum-actionbutton-content-color-default: var(--spectrum-black);
-        --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
-        --spectrum-actionbutton-content-color-down: var(--spectrum-black);
-        --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
+        --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-black));
+        --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-black));
+        --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-black));
+        --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-black));
       }
     }
   }
@@ -198,7 +199,7 @@ governing permissions and limitations under the License.
     --spectrum-actionbutton-border-color-focus: transparent;
 
     --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
-    --spectrum-actionbutton-border-color-disabled: transparent;
+    --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
     --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
 
     &.is-selected {
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml
index e05409504d1..731cb619cdf 100644
--- a/components/actionbutton/metadata/actionbutton.yml
+++ b/components/actionbutton/metadata/actionbutton.yml
@@ -5,6 +5,7 @@ description: |
   - For Action Buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup
   - If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element.
   - If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element.
+  - When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticblack`, use the `--custom-actionbutton-static-content-color` custom property to set the text color when selected.
 sections:
   - name: Custom Properties API
     description: |
@@ -30,6 +31,7 @@ sections:
       |  `--custom-actionbutton-content-color-focus` |
       |  `--custom-actionbutton-content-color-disabled` |
       |  `--custom-actionbutton-focus-ring-color` |
+      |  `--custom-actionbutton-static-content-color` |
       |  `--custom-actionbutton-min-width` |
       |  `--custom-actionbutton-height` |
       |  `--custom-actionbutton-icon-size` |
@@ -732,7 +734,7 @@ examples:
   - id: actionbutton-staticwhite
     name: Static White
     markup: |
-      <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
+      <div style="background-color: rgb(15, 121, 125); --custom-actionbutton-static-content-color: rgb(15, 121, 125); padding: 15px 20px;">
         <div class="spectrum-Examples">
           <div class="spectrum-Examples-item">
             <h4 style="color: white" class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
@@ -864,7 +866,7 @@ examples:
   - id: actionbutton-staticblack
     name: Static Black
     markup: |
-      <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
+      <div style="background-color: rgb(181, 209, 211); --custom-actionbutton-static-content-color: rgb(181, 209, 211); padding: 15px 20px;">
         <div class="spectrum-Examples">
           <div class="spectrum-Examples-item">
             <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
@@ -997,7 +999,7 @@ examples:
   - id: actionbutton-staticwhite-quiet
     name: Static White (quiet)
     markup: |
-      <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
+      <div style="background-color: rgb(15, 121, 125); --custom-actionbutton-static-content-color: rgb(15, 121, 125); padding: 15px 20px;">
         <div class="spectrum-Examples">
           <div class="spectrum-Examples-item">
             <h4 style="color: white" class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
@@ -1129,7 +1131,7 @@ examples:
   - id: actionbutton-staticblack-quiet
     name: Static Black (quiet)
     markup: |
-      <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
+      <div style="background-color: rgb(181, 209, 211); --custom-actionbutton-static-content-color: rgb(181, 209, 211); padding: 15px 20px;">
         <div class="spectrum-Examples">
           <div class="spectrum-Examples-item">
             <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>

From 685b8acafe4b05253c80ccf9b0f28b01b7683b2e Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 13:25:38 -0700
Subject: [PATCH 11/23] fix: active overrides focus

---
 components/actionbutton/index.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index ccec32dec1e..5514e07b574 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -325,16 +325,16 @@ governing permissions and limitations under the License.
     border-color: var(--custom-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover));
     color: var(--custom-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover));
   }
-  &:active {
-    background-color: var(--custom-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down));
-    border-color: var(--custom-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down));
-    color: var(--custom-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down));
-  }
   &:focus-ring {
     background-color: var(--custom-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus));
     border-color: var(--custom-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus));
     color: var(--custom-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus));
   }
+  &:active {
+    background-color: var(--custom-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down));
+    border-color: var(--custom-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down));
+    color: var(--custom-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down));
+  }
   &:disabled,
   &.is-disabled {
     background-color: var(--custom-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));

From c6850b73dfcb6c3d97ca1de0484dbff755483156 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 14:11:51 -0700
Subject: [PATCH 12/23] style: newline

---
 components/actionbutton/index.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 5514e07b574..8cbb58ba2df 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -390,7 +390,6 @@ a.spectrum-ActionButton {
   transform: logical rotate(0deg);
 }
 
-
 /* special cases for focus-ring */
 .spectrum-ActionButton {
   transition: border-color var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
@@ -415,4 +414,4 @@ a.spectrum-ActionButton {
       box-shadow: 0 0 0 var(--custom-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--custom-actionbutton-focus-ring-color, var(--spectrum-actionbutton-focus-ring-color));
     }
   }
-}
\ No newline at end of file
+}

From b99c5032c9641a21e0689372764b52fa71f470ed Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 14:50:41 -0700
Subject: [PATCH 13/23] fix: disabled + selected, move code around

---
 components/actionbutton/index.css | 175 +++++++++++++-----------------
 1 file changed, 75 insertions(+), 100 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 8cbb58ba2df..f74d6b59c25 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -12,41 +12,68 @@ governing permissions and limitations under the License.
 
 @import "../commons/basebutton.css";
 
-/**
 .spectrum-ActionButton {
-  --custom-actionbutton-background-color-default: x;
-  --custom-actionbutton-background-color-hover: x;
-  --custom-actionbutton-background-color-down: x;
-  --custom-actionbutton-background-color-focus: x;
-  --custom-actionbutton-background-color-disabled: x;
-
-  --custom-actionbutton-border-color-default: x;
-  --custom-actionbutton-border-color-hover: x;
-  --custom-actionbutton-border-color-down: x;
-  --custom-actionbutton-border-color-focus: x;
-  --custom-actionbutton-border-color-disabled: x;
-
-  --custom-actionbutton-content-color-default: x;
-  --custom-actionbutton-content-color-hover: x;
-  --custom-actionbutton-content-color-down: x;
-  --custom-actionbutton-content-color-focus: x;
-  --custom-actionbutton-content-color-disabled: x;
-
-  --custom-actionbutton-focus-ring-color: x;
-  --custom-actionbutton-static-content-color: x;
-
-  --custom-actionbutton-min-width: x;
-  --custom-actionbutton-height: x;
-
-  --custom-actionbutton-icon-size: x;
-  --custom-actionbutton-font-size: x;
-  --custom-actionbutton-text-to-visual: x;
-  --custom-actionbutton-edge-to-hold-icon: x;
-  --custom-actionbutton-edge-to-visual: x;
-  --custom-actionbutton-edge-to-text: x;
-  --custom-actionbutton-edge-to-visual-only: x;
+  --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
+  --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100);
+  --spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
+
+  --spectrum-actionbutton-focus-ring-gap: var(--spectrum-focus-ring-gap);
+  --spectrum-actionbutton-focus-ring-thickness: var(--spectrum-focus-ring-thickness);
+  --spectrum-actionbutton-focus-ring-color: var(--spectrum-focus-ring-color);
+  --spectrum-actionbutton-focus-ring-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap));
+}
+
+.spectrum-ActionButton--sizeS {
+  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-75);
+  --spectrum-actionbutton-height: var(--spectrum-component-height-75);
+
+  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
+  --spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
+  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
+  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
+  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-75) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-75) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width));
+}
+
+.spectrum-ActionButton--sizeM {
+  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-100);
+  --spectrum-actionbutton-height: var(--spectrum-component-height-100);
+
+  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
+  --spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
+  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
+  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
+  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-100) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-100) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width));
+}
+
+.spectrum-ActionButton--sizeL {
+  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-200);
+  --spectrum-actionbutton-height: var(--spectrum-component-height-200);
+
+  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
+  --spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
+  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
+  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
+  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-200) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-200) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width));
+}
+
+.spectrum-ActionButton--sizeXL {
+  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-300);
+  --spectrum-actionbutton-height: var(--spectrum-component-height-300);
+
+  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
+  --spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
+  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
+  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
+  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-300) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-300) - var(--spectrum-actionbutton-border-width));
+  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width));
 }
-*/
 
 .spectrum {
   .spectrum-ActionButton {
@@ -65,8 +92,8 @@ governing permissions and limitations under the License.
     --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
     --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
 
-    --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
-    --spectrum-actionbutton-border-color-disabled: transparent;
+    --spectrum-actionbutton-background-color-disabled: transparent;
+    --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
     --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
 
     &.spectrum-ActionButton--quiet {
@@ -94,6 +121,9 @@ governing permissions and limitations under the License.
       --spectrum-actionbutton-border-color-down: transparent;
       --spectrum-actionbutton-border-color-focus: transparent;
 
+      --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
+      --spectrum-actionbutton-border-color-disabled: transparent;
+
       &.spectrum-ActionButton--emphasized {
         --spectrum-actionbutton-background-color-default: var(--spectrum-accent-background-color-default);
         --spectrum-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover);
@@ -146,6 +176,9 @@ governing permissions and limitations under the License.
         --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
         --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
         --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
+
+        --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
+        --spectrum-actionbutton-border-color-disabled: transparent;
       }
     }
 
@@ -181,7 +214,9 @@ governing permissions and limitations under the License.
         --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-black));
         --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-black));
         --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-black));
-      }
+
+        --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
+        --spectrum-actionbutton-border-color-disabled: transparent;      }
     }
   }
 }
@@ -199,7 +234,7 @@ governing permissions and limitations under the License.
     --spectrum-actionbutton-border-color-focus: transparent;
 
     --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
-    --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
+    --spectrum-actionbutton-border-color-disabled: transparent;
     --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
 
     &.is-selected {
@@ -238,69 +273,6 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-ActionButton--sizeS {
-  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-75);
-  --spectrum-actionbutton-height: var(--spectrum-component-height-75);
-
-  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
-  --spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
-  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
-  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
-  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-75) - var(--spectrum-actionbutton-border-width));
-  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-75) - var(--spectrum-actionbutton-border-width));
-  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeM {
-  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-100);
-  --spectrum-actionbutton-height: var(--spectrum-component-height-100);
-
-  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100);
-  --spectrum-actionbutton-font-size: var(--spectrum-font-size-100);
-  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
-  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
-  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-100) - var(--spectrum-actionbutton-border-width));
-  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-100) - var(--spectrum-actionbutton-border-width));
-  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeL {
-  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-200);
-  --spectrum-actionbutton-height: var(--spectrum-component-height-200);
-
-  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
-  --spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
-  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
-  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
-  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-200) - var(--spectrum-actionbutton-border-width));
-  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-200) - var(--spectrum-actionbutton-border-width));
-  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton--sizeXL {
-  --spectrum-actionbutton-min-width: var(--spectrum-component-minimum-width-300);
-  --spectrum-actionbutton-height: var(--spectrum-component-height-300);
-
-  --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
-  --spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
-  --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
-  --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
-  --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-edge-to-visual-300) - var(--spectrum-actionbutton-border-width));
-  --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-edge-to-text-300) - var(--spectrum-actionbutton-border-width));
-  --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width));
-}
-
-.spectrum-ActionButton {
-  --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
-  --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100);
-  --spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
-
-  --spectrum-actionbutton-focus-ring-gap: var(--spectrum-focus-ring-gap);
-  --spectrum-actionbutton-focus-ring-thickness: var(--spectrum-focus-ring-thickness);
-  --spectrum-actionbutton-focus-ring-color: var(--spectrum-focus-ring-color);
-  --spectrum-actionbutton-focus-ring-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap));
-}
-
 .spectrum-ActionButton {
   @inherit: %spectrum-BaseButton;
   position: relative;
@@ -325,16 +297,19 @@ governing permissions and limitations under the License.
     border-color: var(--custom-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover));
     color: var(--custom-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover));
   }
+
   &:focus-ring {
     background-color: var(--custom-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus));
     border-color: var(--custom-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus));
     color: var(--custom-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus));
   }
+
   &:active {
     background-color: var(--custom-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down));
     border-color: var(--custom-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down));
     color: var(--custom-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down));
   }
+
   &:disabled,
   &.is-disabled {
     background-color: var(--custom-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));

From 2da4d40d788bab5bc1e5d287e1499ffa7e7a7591 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 16:23:40 -0700
Subject: [PATCH 14/23] fix: update tokens

---
 components/coretokens/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/coretokens/package.json b/components/coretokens/package.json
index e451af0bdc8..1662fc599b7 100644
--- a/components/coretokens/package.json
+++ b/components/coretokens/package.json
@@ -18,7 +18,7 @@
   "devDependencies": {
     "gulp": "^4.0.0",
     "gulp-concat": "^2.6.1",
-    "@adobe/spectrum-tokens": "^12.0.0-beta.18",
+    "@adobe/spectrum-tokens": "^12.0.0-beta.19",
     "style-dictionary": "^3.7.0",
     "style-dictionary-sets": "^1.4.1"
   },

From d8ca3cec8bd45902185a8b877a256c2732a1a973 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 16:23:58 -0700
Subject: [PATCH 15/23] fix: repair WHCM that I broke

---
 components/actionbutton/index.css | 146 ++++++++++++++++++++++++++++
 components/actionbutton/skin.css  | 155 ------------------------------
 2 files changed, 146 insertions(+), 155 deletions(-)
 delete mode 100644 components/actionbutton/skin.css

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index f74d6b59c25..8418b200e06 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -273,6 +273,152 @@ governing permissions and limitations under the License.
   }
 }
 
+@media (forced-colors: active) {
+  .spectrum-ActionButton {
+    forced-color-adjust: none;
+
+    --spectrum-actionbutton-focus-ring-thickness: 3px;
+
+    --spectrum-actionbutton-background-color-default: ButtonFace;
+    --spectrum-actionbutton-background-color-hover: ButtonFace;
+    --spectrum-actionbutton-background-color-down: ButtonFace;
+    --spectrum-actionbutton-background-color-focus: ButtonFace;
+    --spectrum-actionbutton-background-color-disabled: ButtonFace;
+
+    --spectrum-actionbutton-border-color-default: ButtonText;
+    --spectrum-actionbutton-border-color-hover: ButtonText;
+    --spectrum-actionbutton-border-color-down: ButtonText;
+    --spectrum-actionbutton-border-color-focus: Highlight;
+    --spectrum-actionbutton-border-color-disabled: GrayText;
+
+    --spectrum-actionbutton-content-color-default: ButtonText;
+    --spectrum-actionbutton-content-color-hover: ButtonText;
+    --spectrum-actionbutton-content-color-down: ButtonText;
+    --spectrum-actionbutton-content-color-focus: ButtonText;
+    --spectrum-actionbutton-content-color-disabled: GrayText;
+
+    &.is-selected {
+      --spectrum-actionbutton-background-color-default: Highlight;
+      --spectrum-actionbutton-background-color-hover: Highlight;
+      --spectrum-actionbutton-background-color-down: Highlight;
+      --spectrum-actionbutton-background-color-focus: Highlight;
+      --spectrum-actionbutton-background-color-disabled: ButtonFace;
+
+      --spectrum-actionbutton-border-color-default: HighlightText;
+      --spectrum-actionbutton-border-color-hover: HighlightText;
+      --spectrum-actionbutton-border-color-down: HighlightText;
+      --spectrum-actionbutton-border-color-focus: HighlightText;
+      --spectrum-actionbutton-border-color-disabled: GrayText;
+
+      --spectrum-actionbutton-content-color-default: HighlightText;
+      --spectrum-actionbutton-content-color-hover: HighlightText;
+      --spectrum-actionbutton-content-color-down: HighlightText;
+      --spectrum-actionbutton-content-color-focus: HighlightText;
+      --spectrum-actionbutton-content-color-disabled: GrayText;
+    }
+
+    &.spectrum-ActionButton--emphasized {
+      --spectrum-actionbutton-background-color: ButtonFace;
+      --spectrum-actionbutton-background-color-hover: ButtonFace;
+      --spectrum-actionbutton-background-color-down: ButtonFace;
+      --spectrum-actionbutton-background-color-focus: ButtonFace;
+      --spectrum-actionbutton-background-color-disabled: ButtonFace;
+
+      --spectrum-actionbutton-border-color-default: ButtonText;
+      --spectrum-actionbutton-border-color-hover: ButtonText;
+      --spectrum-actionbutton-border-color-down: ButtonText;
+      --spectrum-actionbutton-border-color-focus: ButtonText;
+      --spectrum-actionbutton-border-color-disabled: GrayText;
+
+      --spectrum-actionbutton-content-color-default: ButtonText;
+      --spectrum-actionbutton-content-color-hover: ButtonText;
+      --spectrum-actionbutton-content-color-down: ButtonText;
+      --spectrum-actionbutton-content-color-focus: ButtonText;
+      --spectrum-actionbutton-content-color-disabled: GrayText;
+
+      &.is-selected {
+        --spectrum-actionbutton-background-color-default: Highlight;
+        --spectrum-actionbutton-background-color-hover: Highlight;
+        --spectrum-actionbutton-background-color-down: Highlight;
+        --spectrum-actionbutton-background-color-focus: Highlight;
+        --spectrum-actionbutton-background-color-disabled: ButtonFace;
+
+        --spectrum-actionbutton-border-color-default: HighlightText;
+        --spectrum-actionbutton-border-color-hover: HighlightText;
+        --spectrum-actionbutton-border-color-down: HighlightText;
+        --spectrum-actionbutton-border-color-focus: HighlightText;
+        --spectrum-actionbutton-border-color-disabled: GrayText;
+
+        --spectrum-actionbutton-content-color-default: HighlightText;
+        --spectrum-actionbutton-content-color-hover: HighlightText;
+        --spectrum-actionbutton-content-color-down: HighlightText;
+        --spectrum-actionbutton-content-color-focus: HighlightText;
+        --spectrum-actionbutton-content-color-disabled: GrayText;
+      }
+    }
+
+    .spectrum-ActionButton--quiet {
+      --spectrum-actionbutton-background-color: ButtonFace;
+      --spectrum-actionbutton-background-color-hover: ButtonFace;
+      --spectrum-actionbutton-background-color-down: ButtonFace;
+      --spectrum-actionbutton-background-color-focus: ButtonFace;
+      --spectrum-actionbutton-background-color-disabled: ButtonFace;
+
+      --spectrum-actionbutton-border-color-default: ButtonFace;
+      --spectrum-actionbutton-border-color-hover: ButtonFace;
+      --spectrum-actionbutton-border-color-down: ButtonFace;
+      --spectrum-actionbutton-border-color-focus: Highlight;
+      --spectrum-actionbutton-border-color-disabled: ButtonFace;
+
+      --spectrum-actionbutton-content-color-default: ButtonText;
+      --spectrum-actionbutton-content-color-hover: ButtonText;
+      --spectrum-actionbutton-content-color-down: ButtonText;
+      --spectrum-actionbutton-content-color-focus: ButtonText;
+      --spectrum-actionbutton-content-color-disabled: GrayText;
+
+      &.is-selected {
+        --spectrum-actionbutton-background-color-default: Highlight;
+        --spectrum-actionbutton-background-color-hover: Highlight;
+        --spectrum-actionbutton-background-color-down: Highlight;
+        --spectrum-actionbutton-background-color-focus: Highlight;
+        --spectrum-actionbutton-background-color-disabled: ButtonFace;
+
+        --spectrum-actionbutton-border-color-default: HighlightText;
+        --spectrum-actionbutton-border-color-hover: HighlightText;
+        --spectrum-actionbutton-border-color-down: HighlightText;
+        --spectrum-actionbutton-border-color-focus: HighlightText;
+        --spectrum-actionbutton-border-color-disabled: GrayText;
+
+        --spectrum-actionbutton-content-color-default: HighlightText;
+        --spectrum-actionbutton-content-color-hover: HighlightText;
+        --spectrum-actionbutton-content-color-down: HighlightText;
+        --spectrum-actionbutton-content-color-focus: HighlightText;
+        --spectrum-actionbutton-content-color-disabled: GrayText;
+      }
+    }
+
+    /*
+    &.spectrum-ActionButton--quiet {
+      &.spectrum-ActionButton--emphasized {
+        &:not(:disabled, .is-disabled) {
+          &:hover {
+            background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover);
+            border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover);
+            color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover);
+          }
+
+          &.is-active {
+            background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down);
+            border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down);
+            color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down);
+          }
+        }
+      }
+    }
+    */
+  }
+}
+
 .spectrum-ActionButton {
   @inherit: %spectrum-BaseButton;
   position: relative;
diff --git a/components/actionbutton/skin.css b/components/actionbutton/skin.css
deleted file mode 100644
index 082e13b1d47..00000000000
--- a/components/actionbutton/skin.css
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
-Copyright 2019 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-@media (forced-colors: active) {
-  .spectrum-ActionButton {
-    --spectrum-actionbutton-m-emphasized-texticon-icon-color: ButtonText;
-    --spectrum-actionbutton-m-emphasized-texticon-icon-color-disabled: GrayText;
-    --spectrum-actionbutton-m-emphasized-texticon-icon-color-hover: ButtonText;
-    --spectrum-actionbutton-m-emphasized-texticon-icon-color-key-focus: ButtonText;
-    --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected: HighlightText;
-    --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-disabled: GrayText;
-    --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-down: HighlightText;
-    --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-hover: HighlightText;
-    --spectrum-actionbutton-m-emphasized-texticon-icon-color-selected-key-focus: HighlightText;
-    --spectrum-actionbutton-m-emphasized-textonly-background-color: ButtonFace;
-    --spectrum-actionbutton-m-emphasized-textonly-background-color-disabled: ButtonFace;
-    --spectrum-actionbutton-m-emphasized-textonly-background-color-down: ButtonFace;
-    --spectrum-actionbutton-m-emphasized-textonly-background-color-hover: ButtonFace;
-    --spectrum-actionbutton-m-emphasized-textonly-background-color-key-focus: ButtonFace;
-    --spectrum-actionbutton-m-emphasized-textonly-background-color-selected: Highlight;
-    --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-disabled: ButtonFace;
-    --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down: Highlight;
-    --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover: Highlight;
-    --spectrum-actionbutton-m-emphasized-textonly-background-color-selected-key-focus: Highlight;
-    --spectrum-actionbutton-m-emphasized-textonly-border-color: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-border-color-disabled: GrayText;
-    --spectrum-actionbutton-m-emphasized-textonly-border-color-down: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-border-color-hover: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-border-color-key-focus: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-border-color-selected: HighlightText;
-    --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-disabled: GrayText;
-    --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down: HighlightText;
-    --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover: HighlightText;
-    --spectrum-actionbutton-m-emphasized-textonly-border-color-selected-key-focus: HighlightText;
-    --spectrum-actionbutton-m-emphasized-textonly-hold-icon-color: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-hold-icon-color-disabled: GrayText;
-    --spectrum-actionbutton-m-emphasized-textonly-hold-icon-color-down: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-hold-icon-color-hover: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-hold-icon-color-key-focus: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-hold-icon-color-selected: HighlightText;
-    --spectrum-actionbutton-m-emphasized-textonly-text-color: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-text-color-disabled: GrayText;
-    --spectrum-actionbutton-m-emphasized-textonly-text-color-down: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-text-color-hover: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-text-color-key-focus: ButtonText;
-    --spectrum-actionbutton-m-emphasized-textonly-text-color-selected: HighlightText;
-    --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-disabled: GrayText;
-    --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down: HighlightText;
-    --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover: HighlightText;
-    --spectrum-actionbutton-m-emphasized-textonly-text-color-selected-key-focus: HighlightText;
-    --spectrum-actionbutton-m-quiet-textonly-background-color: ButtonFace;
-    --spectrum-actionbutton-m-quiet-textonly-background-color-disabled: ButtonFace;
-    --spectrum-actionbutton-m-quiet-textonly-background-color-down: ButtonFace;
-    --spectrum-actionbutton-m-quiet-textonly-background-color-hover: ButtonFace;
-    --spectrum-actionbutton-m-quiet-textonly-background-color-key-focus: ButtonFace;
-    --spectrum-actionbutton-m-quiet-textonly-background-color-selected: Highlight;
-    --spectrum-actionbutton-m-quiet-textonly-background-color-selected-disabled: ButtonFace;
-    --spectrum-actionbutton-m-quiet-textonly-background-color-selected-down: Highlight;
-    --spectrum-actionbutton-m-quiet-textonly-background-color-selected-hover: Highlight;
-    --spectrum-actionbutton-m-quiet-textonly-background-color-selected-key-focus: Highlight;
-    --spectrum-actionbutton-m-quiet-textonly-border-color: ButtonFace;
-    --spectrum-actionbutton-m-quiet-textonly-border-color-disabled: ButtonFace;
-    --spectrum-actionbutton-m-quiet-textonly-border-color-down: ButtonFace;
-    --spectrum-actionbutton-m-quiet-textonly-border-color-hover: ButtonFace;
-    --spectrum-actionbutton-m-quiet-textonly-border-color-key-focus: Highlight;
-    --spectrum-actionbutton-m-quiet-textonly-border-color-selected: HighlightText;
-    --spectrum-actionbutton-m-quiet-textonly-border-color-selected-disabled: GrayText;
-    --spectrum-actionbutton-m-quiet-textonly-border-color-selected-down: HighlightText;
-    --spectrum-actionbutton-m-quiet-textonly-border-color-selected-hover: HighlightText;
-    --spectrum-actionbutton-m-quiet-textonly-border-color-selected-key-focus: HighlightText;
-    --spectrum-actionbutton-m-quiet-textonly-text-color: ButtonText;
-    --spectrum-actionbutton-m-quiet-textonly-text-color-disabled: GrayText;
-    --spectrum-actionbutton-m-quiet-textonly-text-color-down: ButtonText;
-    --spectrum-actionbutton-m-quiet-textonly-text-color-hover: ButtonText;
-    --spectrum-actionbutton-m-quiet-textonly-text-color-key-focus: ButtonText;
-    --spectrum-actionbutton-m-quiet-textonly-text-color-selected: HighlightText;
-    --spectrum-actionbutton-m-quiet-textonly-text-color-selected-disabled: GrayText;
-    --spectrum-actionbutton-m-quiet-textonly-text-color-selected-down: HighlightText;
-    --spectrum-actionbutton-m-quiet-textonly-text-color-selected-hover: HighlightText;
-    --spectrum-actionbutton-m-quiet-textonly-text-color-selected-key-focus: HighlightText;
-    --spectrum-actionbutton-m-texticon-icon-color: ButtonText;
-    --spectrum-actionbutton-m-texticon-icon-color-disabled: GrayText;
-    --spectrum-actionbutton-m-texticon-icon-color-hover: ButtonText;
-    --spectrum-actionbutton-m-texticon-icon-color-key-focus: ButtonText;
-    --spectrum-actionbutton-m-texticon-icon-color-selected: HighlightText;
-    --spectrum-actionbutton-m-texticon-icon-color-selected-disabled: GrayText;
-    --spectrum-actionbutton-m-texticon-icon-color-selected-down: HighlightText;
-    --spectrum-actionbutton-m-texticon-icon-color-selected-hover: HighlightText;
-    --spectrum-actionbutton-m-texticon-icon-color-selected-key-focus: HighlightText;
-    --spectrum-actionbutton-m-textonly-background-color: ButtonFace;
-    --spectrum-actionbutton-m-textonly-background-color-disabled: ButtonFace;
-    --spectrum-actionbutton-m-textonly-background-color-down: ButtonFace;
-    --spectrum-actionbutton-m-textonly-background-color-hover: ButtonFace;
-    --spectrum-actionbutton-m-textonly-background-color-key-focus: ButtonFace;
-    --spectrum-actionbutton-m-textonly-background-color-selected: Highlight;
-    --spectrum-actionbutton-m-textonly-background-color-selected-disabled: ButtonFace;
-    --spectrum-actionbutton-m-textonly-background-color-selected-down: Highlight;
-    --spectrum-actionbutton-m-textonly-background-color-selected-hover: Highlight;
-    --spectrum-actionbutton-m-textonly-background-color-selected-key-focus: Highlight;
-    --spectrum-actionbutton-m-textonly-border-color: ButtonText;
-    --spectrum-actionbutton-m-textonly-border-color-disabled: GrayText;
-    --spectrum-actionbutton-m-textonly-border-color-down: ButtonText;
-    --spectrum-actionbutton-m-textonly-border-color-hover: ButtonText;
-    --spectrum-actionbutton-m-textonly-border-color-key-focus: Highlight;
-    --spectrum-actionbutton-m-textonly-border-color-selected: HighlightText;
-    --spectrum-actionbutton-m-textonly-border-color-selected-disabled: GrayText;
-    --spectrum-actionbutton-m-textonly-border-color-selected-down: HighlightText;
-    --spectrum-actionbutton-m-textonly-border-color-selected-hover: HighlightText;
-    --spectrum-actionbutton-m-textonly-border-color-selected-key-focus: HighlightText;
-    --spectrum-actionbutton-m-textonly-hold-icon-color: ButtonText;
-    --spectrum-actionbutton-m-textonly-hold-icon-color-disabled: GrayText;
-    --spectrum-actionbutton-m-textonly-hold-icon-color-down: ButtonText;
-    --spectrum-actionbutton-m-textonly-hold-icon-color-hover: ButtonText;
-    --spectrum-actionbutton-m-textonly-hold-icon-color-key-focus: ButtonText;
-    --spectrum-actionbutton-m-textonly-text-color: ButtonText;
-    --spectrum-actionbutton-m-textonly-text-color-disabled: GrayText;
-    --spectrum-actionbutton-m-textonly-text-color-down: ButtonText;
-    --spectrum-actionbutton-m-textonly-text-color-hover: ButtonText;
-    --spectrum-actionbutton-m-textonly-text-color-key-focus: ButtonText;
-    --spectrum-actionbutton-m-textonly-text-color-selected: HighlightText;
-    --spectrum-actionbutton-m-textonly-text-color-selected-disabled: GrayText;
-    --spectrum-actionbutton-m-textonly-text-color-selected-down: HighlightText;
-    --spectrum-actionbutton-m-textonly-text-color-selected-hover: HighlightText;
-    --spectrum-actionbutton-m-textonly-text-color-selected-key-focus: HighlightText;
-
-    forced-color-adjust: none;
-    --spectrum-actionbutton-m-quiet-textonly-border-size-key-focus: 3px;
-    &.spectrum-ActionButton--quiet {
-      &.spectrum-ActionButton--emphasized {
-        &:not(:disabled, .is-disabled) {
-          &:hover {
-            background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover);
-            border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover);
-            color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover);
-          }
-
-          &.is-active {
-            background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down);
-            border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down);
-            color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down);
-          }
-        }
-      }
-    }
-  }
-}

From 0639127bd7c039602c227734e186519983ee1b96 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 17:26:30 -0700
Subject: [PATCH 16/23] fix: correct WHCM implementation with @nurthen

---
 components/actionbutton/index.css             | 166 ++++--------------
 .../actionbutton/metadata/actionbutton.yml    |  40 +++--
 2 files changed, 53 insertions(+), 153 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 8418b200e06..3fc7efaf24f 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -275,147 +275,41 @@ governing permissions and limitations under the License.
 
 @media (forced-colors: active) {
   .spectrum-ActionButton {
-    forced-color-adjust: none;
-
-    --spectrum-actionbutton-focus-ring-thickness: 3px;
-
-    --spectrum-actionbutton-background-color-default: ButtonFace;
-    --spectrum-actionbutton-background-color-hover: ButtonFace;
-    --spectrum-actionbutton-background-color-down: ButtonFace;
-    --spectrum-actionbutton-background-color-focus: ButtonFace;
-    --spectrum-actionbutton-background-color-disabled: ButtonFace;
-
-    --spectrum-actionbutton-border-color-default: ButtonText;
-    --spectrum-actionbutton-border-color-hover: ButtonText;
-    --spectrum-actionbutton-border-color-down: ButtonText;
-    --spectrum-actionbutton-border-color-focus: Highlight;
-    --spectrum-actionbutton-border-color-disabled: GrayText;
-
-    --spectrum-actionbutton-content-color-default: ButtonText;
-    --spectrum-actionbutton-content-color-hover: ButtonText;
-    --spectrum-actionbutton-content-color-down: ButtonText;
-    --spectrum-actionbutton-content-color-focus: ButtonText;
-    --spectrum-actionbutton-content-color-disabled: GrayText;
-
-    &.is-selected {
-      --spectrum-actionbutton-background-color-default: Highlight;
-      --spectrum-actionbutton-background-color-hover: Highlight;
-      --spectrum-actionbutton-background-color-down: Highlight;
-      --spectrum-actionbutton-background-color-focus: Highlight;
-      --spectrum-actionbutton-background-color-disabled: ButtonFace;
-
-      --spectrum-actionbutton-border-color-default: HighlightText;
-      --spectrum-actionbutton-border-color-hover: HighlightText;
-      --spectrum-actionbutton-border-color-down: HighlightText;
-      --spectrum-actionbutton-border-color-focus: HighlightText;
-      --spectrum-actionbutton-border-color-disabled: GrayText;
-
-      --spectrum-actionbutton-content-color-default: HighlightText;
-      --spectrum-actionbutton-content-color-hover: HighlightText;
-      --spectrum-actionbutton-content-color-down: HighlightText;
-      --spectrum-actionbutton-content-color-focus: HighlightText;
-      --spectrum-actionbutton-content-color-disabled: GrayText;
-    }
-
-    &.spectrum-ActionButton--emphasized {
-      --spectrum-actionbutton-background-color: ButtonFace;
-      --spectrum-actionbutton-background-color-hover: ButtonFace;
-      --spectrum-actionbutton-background-color-down: ButtonFace;
-      --spectrum-actionbutton-background-color-focus: ButtonFace;
-      --spectrum-actionbutton-background-color-disabled: ButtonFace;
-
-      --spectrum-actionbutton-border-color-default: ButtonText;
-      --spectrum-actionbutton-border-color-hover: ButtonText;
-      --spectrum-actionbutton-border-color-down: ButtonText;
-      --spectrum-actionbutton-border-color-focus: ButtonText;
-      --spectrum-actionbutton-border-color-disabled: GrayText;
-
-      --spectrum-actionbutton-content-color-default: ButtonText;
-      --spectrum-actionbutton-content-color-hover: ButtonText;
-      --spectrum-actionbutton-content-color-down: ButtonText;
-      --spectrum-actionbutton-content-color-focus: ButtonText;
-      --spectrum-actionbutton-content-color-disabled: GrayText;
-
-      &.is-selected {
-        --spectrum-actionbutton-background-color-default: Highlight;
-        --spectrum-actionbutton-background-color-hover: Highlight;
-        --spectrum-actionbutton-background-color-down: Highlight;
-        --spectrum-actionbutton-background-color-focus: Highlight;
-        --spectrum-actionbutton-background-color-disabled: ButtonFace;
-
-        --spectrum-actionbutton-border-color-default: HighlightText;
-        --spectrum-actionbutton-border-color-hover: HighlightText;
-        --spectrum-actionbutton-border-color-down: HighlightText;
-        --spectrum-actionbutton-border-color-focus: HighlightText;
-        --spectrum-actionbutton-border-color-disabled: GrayText;
-
-        --spectrum-actionbutton-content-color-default: HighlightText;
-        --spectrum-actionbutton-content-color-hover: HighlightText;
-        --spectrum-actionbutton-content-color-down: HighlightText;
-        --spectrum-actionbutton-content-color-focus: HighlightText;
-        --spectrum-actionbutton-content-color-disabled: GrayText;
-      }
+    &:after {
+      /* make sure focus-ring renders */
+      forced-color-adjust: none;
     }
 
-    .spectrum-ActionButton--quiet {
-      --spectrum-actionbutton-background-color: ButtonFace;
-      --spectrum-actionbutton-background-color-hover: ButtonFace;
-      --spectrum-actionbutton-background-color-down: ButtonFace;
-      --spectrum-actionbutton-background-color-focus: ButtonFace;
-      --spectrum-actionbutton-background-color-disabled: ButtonFace;
-
-      --spectrum-actionbutton-border-color-default: ButtonFace;
-      --spectrum-actionbutton-border-color-hover: ButtonFace;
-      --spectrum-actionbutton-border-color-down: ButtonFace;
-      --spectrum-actionbutton-border-color-focus: Highlight;
-      --spectrum-actionbutton-border-color-disabled: ButtonFace;
-
-      --spectrum-actionbutton-content-color-default: ButtonText;
-      --spectrum-actionbutton-content-color-hover: ButtonText;
-      --spectrum-actionbutton-content-color-down: ButtonText;
-      --spectrum-actionbutton-content-color-focus: ButtonText;
-      --spectrum-actionbutton-content-color-disabled: GrayText;
+    /* force a more visible focus-ring color */
+    --custom-actionbutton-focus-ring-color: ButtonText;
 
-      &.is-selected {
-        --spectrum-actionbutton-background-color-default: Highlight;
-        --spectrum-actionbutton-background-color-hover: Highlight;
-        --spectrum-actionbutton-background-color-down: Highlight;
-        --spectrum-actionbutton-background-color-focus: Highlight;
-        --spectrum-actionbutton-background-color-disabled: ButtonFace;
-
-        --spectrum-actionbutton-border-color-default: HighlightText;
-        --spectrum-actionbutton-border-color-hover: HighlightText;
-        --spectrum-actionbutton-border-color-down: HighlightText;
-        --spectrum-actionbutton-border-color-focus: HighlightText;
-        --spectrum-actionbutton-border-color-disabled: GrayText;
-
-        --spectrum-actionbutton-content-color-default: HighlightText;
-        --spectrum-actionbutton-content-color-hover: HighlightText;
-        --spectrum-actionbutton-content-color-down: HighlightText;
-        --spectrum-actionbutton-content-color-focus: HighlightText;
-        --spectrum-actionbutton-content-color-disabled: GrayText;
-      }
-    }
-
-    /*
-    &.spectrum-ActionButton--quiet {
-      &.spectrum-ActionButton--emphasized {
-        &:not(:disabled, .is-disabled) {
-          &:hover {
-            background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-hover);
-            border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-hover);
-            color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-hover);
-          }
-
-          &.is-active {
-            background-color: var(--spectrum-actionbutton-m-emphasized-textonly-background-color-selected-down);
-            border-color: var(--spectrum-actionbutton-m-emphasized-textonly-border-color-selected-down);
-            color: var(--spectrum-actionbutton-m-emphasized-textonly-text-color-selected-down);
-          }
-        }
+    &.is-selected {
+      --custom-actionbutton-background-color-default: Highlight;
+      --custom-actionbutton-background-color-hover: Highlight;
+      --custom-actionbutton-background-color-focus: Highlight;
+      --custom-actionbutton-background-color-down: Highlight;
+      --custom-actionbutton-background-color-disabled: ButtonFace;
+
+      --custom-actionbutton-border-color-default: HighlightText;
+      --custom-actionbutton-border-color-hover: HighlightText;
+      --custom-actionbutton-border-color-focus: HighlightText;
+      --custom-actionbutton-border-color-down: HighlightText;
+      --custom-actionbutton-border-color-disabled: GrayText;
+
+      --custom-actionbutton-content-color-default: HighlightText;
+      --custom-actionbutton-content-color-hover: HighlightText;
+      --custom-actionbutton-content-color-focus: HighlightText;
+      --custom-actionbutton-content-color-down: HighlightText;
+      --custom-actionbutton-content-color-disabled: GrayText;
+
+      .spectrum-ActionButton-icon,
+      .spectrum-ActionButton-hold,
+      .spectrum-ActionButton-label {
+        /* ensure custom text colors from above get applied */
+        /* it seems like this shouldn't have to be done, but colors are wrong without it */
+        forced-color-adjust: none;
       }
     }
-    */
   }
 }
 
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml
index 731cb619cdf..882b7431fdf 100644
--- a/components/actionbutton/metadata/actionbutton.yml
+++ b/components/actionbutton/metadata/actionbutton.yml
@@ -1264,24 +1264,30 @@ examples:
     name: Customized
     markup: |
       <style type="text/css">
-        .custom-ActionButton {
-          --custom-actionbutton-background-color-default: var(--spectrum-orange-200);
-          --custom-actionbutton-background-color-hover: var(--spectrum-orange-100);
-          --custom-actionbutton-background-color-down: var(--spectrum-orange-400);
-          --custom-actionbutton-background-color-focus: var(--spectrum-orange-100);
-
-          --custom-actionbutton-border-color-default: var(--spectrum-orange-400);
-          --custom-actionbutton-border-color-hover: var(--spectrum-orange-500);
-          --custom-actionbutton-border-color-down: var(--spectrum-orange-600);
-          --custom-actionbutton-border-color-focus: var(--spectrum-orange-500);
-
-          --custom-actionbutton-content-color-default: var(--spectrum-orange-1000);
-          --custom-actionbutton-content-color-hover: var(--spectrum-orange-1100);
-          --custom-actionbutton-content-color-down: var(--spectrum-orange-1000);
-          --custom-actionbutton-content-color-focus: var(--spectrum-orange-1300);
-
-          --custom-actionbutton-focus-ring-color: var(--spectrum-orange-800);
+        /* color customizations should not be done if forced-colors is set */
+        @media (forced-colors: none) {
+          .custom-ActionButton {
+            --custom-actionbutton-background-color-default: var(--spectrum-orange-200);
+            --custom-actionbutton-background-color-hover: var(--spectrum-orange-100);
+            --custom-actionbutton-background-color-down: var(--spectrum-orange-400);
+            --custom-actionbutton-background-color-focus: var(--spectrum-orange-100);
+
+            --custom-actionbutton-border-color-default: var(--spectrum-orange-400);
+            --custom-actionbutton-border-color-hover: var(--spectrum-orange-500);
+            --custom-actionbutton-border-color-down: var(--spectrum-orange-600);
+            --custom-actionbutton-border-color-focus: var(--spectrum-orange-500);
+
+            --custom-actionbutton-content-color-default: var(--spectrum-orange-1000);
+            --custom-actionbutton-content-color-hover: var(--spectrum-orange-1100);
+            --custom-actionbutton-content-color-down: var(--spectrum-orange-1000);
+            --custom-actionbutton-content-color-focus: var(--spectrum-orange-1300);
+
+            --custom-actionbutton-focus-ring-color: var(--spectrum-orange-800);
+          }
+        }
 
+        /* dimensional customizations can be done for all cases */
+        .custom-ActionButton {
           --custom-actionbutton-min-width: 24px;
           --custom-actionbutton-height: 44px;
 

From 7980f0c18c9df74b01c8d19449324eb89e91a002 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 27 Apr 2022 17:29:46 -0700
Subject: [PATCH 17/23] feat: force high contrast mode, don't let people mess
 it up

---
 components/actionbutton/index.css             | 68 +++++++++----------
 .../actionbutton/metadata/actionbutton.yml    | 40 +++++------
 2 files changed, 51 insertions(+), 57 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 3fc7efaf24f..d13e8ea3613 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -281,26 +281,26 @@ governing permissions and limitations under the License.
     }
 
     /* force a more visible focus-ring color */
-    --custom-actionbutton-focus-ring-color: ButtonText;
+    --highcontrast-actionbutton-focus-ring-color: ButtonText;
 
     &.is-selected {
-      --custom-actionbutton-background-color-default: Highlight;
-      --custom-actionbutton-background-color-hover: Highlight;
-      --custom-actionbutton-background-color-focus: Highlight;
-      --custom-actionbutton-background-color-down: Highlight;
-      --custom-actionbutton-background-color-disabled: ButtonFace;
-
-      --custom-actionbutton-border-color-default: HighlightText;
-      --custom-actionbutton-border-color-hover: HighlightText;
-      --custom-actionbutton-border-color-focus: HighlightText;
-      --custom-actionbutton-border-color-down: HighlightText;
-      --custom-actionbutton-border-color-disabled: GrayText;
-
-      --custom-actionbutton-content-color-default: HighlightText;
-      --custom-actionbutton-content-color-hover: HighlightText;
-      --custom-actionbutton-content-color-focus: HighlightText;
-      --custom-actionbutton-content-color-down: HighlightText;
-      --custom-actionbutton-content-color-disabled: GrayText;
+      --highcontrast-actionbutton-background-color-default: Highlight;
+      --highcontrast-actionbutton-background-color-hover: Highlight;
+      --highcontrast-actionbutton-background-color-focus: Highlight;
+      --highcontrast-actionbutton-background-color-down: Highlight;
+      --highcontrast-actionbutton-background-color-disabled: ButtonFace;
+
+      --highcontrast-actionbutton-border-color-default: HighlightText;
+      --highcontrast-actionbutton-border-color-hover: HighlightText;
+      --highcontrast-actionbutton-border-color-focus: HighlightText;
+      --highcontrast-actionbutton-border-color-down: HighlightText;
+      --highcontrast-actionbutton-border-color-disabled: GrayText;
+
+      --highcontrast-actionbutton-content-color-default: HighlightText;
+      --highcontrast-actionbutton-content-color-hover: HighlightText;
+      --highcontrast-actionbutton-content-color-focus: HighlightText;
+      --highcontrast-actionbutton-content-color-down: HighlightText;
+      --highcontrast-actionbutton-content-color-disabled: GrayText;
 
       .spectrum-ActionButton-icon,
       .spectrum-ActionButton-hold,
@@ -328,33 +328,33 @@ governing permissions and limitations under the License.
   padding-inline-start: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text));
   padding-inline-end: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text));
 
-  background-color: var(--custom-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default));
-  border-color: var(--custom-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default));
-  color: var(--custom-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default));
+  background-color: var(--highcontrast-actionbutton-background-color-default, var(--custom-actionbutton-background-color-default), var(--spectrum-actionbutton-background-color-default));
+  border-color: var(--highcontrast-actionbutton-border-color-default, var(--custom-actionbutton-border-color-default), var(--spectrum-actionbutton-border-color-default));
+  color: var(--highcontrast-actionbutton-content-color-default, var(--custom-actionbutton-content-color-default), var(--spectrum-actionbutton-content-color-default));
 
   &:hover {
-    background-color: var(--custom-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover));
-    border-color: var(--custom-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover));
-    color: var(--custom-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover));
+    background-color: var(--highcontrast-actionbutton-background-color-hover, var(--custom-actionbutton-background-color-hover), var(--spectrum-actionbutton-background-color-hover));
+    border-color: var(--highcontrast-actionbutton-border-color-hover, var(--custom-actionbutton-border-color-hover), var(--spectrum-actionbutton-border-color-hover));
+    color: var(--highcontrast-actionbutton-content-color-hover, var(--custom-actionbutton-content-color-hover), var(--spectrum-actionbutton-content-color-hover));
   }
 
   &:focus-ring {
-    background-color: var(--custom-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus));
-    border-color: var(--custom-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus));
-    color: var(--custom-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus));
+    background-color: var(--highcontrast-actionbutton-background-color-focus, var(--custom-actionbutton-background-color-focus), var(--spectrum-actionbutton-background-color-focus));
+    border-color: var(--highcontrast-actionbutton-border-color-focus, var(--custom-actionbutton-border-color-focus), var(--spectrum-actionbutton-border-color-focus));
+    color: var(--highcontrast-actionbutton-content-color-focus, var(--custom-actionbutton-content-color-focus), var(--spectrum-actionbutton-content-color-focus));
   }
 
   &:active {
-    background-color: var(--custom-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down));
-    border-color: var(--custom-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down));
-    color: var(--custom-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down));
+    background-color: var(--highcontrast-actionbutton-background-color-down, var(--custom-actionbutton-background-color-down), var(--spectrum-actionbutton-background-color-down));
+    border-color: var(--highcontrast-actionbutton-border-color-down, var(--custom-actionbutton-border-color-down), var(--spectrum-actionbutton-border-color-down));
+    color: var(--highcontrast-actionbutton-content-color-down, var(--custom-actionbutton-content-color-down), var(--spectrum-actionbutton-content-color-down));
   }
 
   &:disabled,
   &.is-disabled {
-    background-color: var(--custom-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));
-    border-color: var(--custom-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled));
-    color: var(--custom-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled));
+    background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--custom-actionbutton-background-color-disabled), var(--spectrum-actionbutton-background-color-disabled));
+    border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--custom-actionbutton-border-color-disabled), var(--spectrum-actionbutton-border-color-disabled));
+    color: var(--highcontrast-actionbutton-content-color-disabled, var(--custom-actionbutton-content-color-disabled), var(--spectrum-actionbutton-content-color-disabled));
   }
 }
 
@@ -426,7 +426,7 @@ a.spectrum-ActionButton {
     box-shadow: none !important;
 
     &:after {
-      box-shadow: 0 0 0 var(--custom-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--custom-actionbutton-focus-ring-color, var(--spectrum-actionbutton-focus-ring-color));
+      box-shadow: 0 0 0 var(--custom-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--highcontrast-actionbutton-focus-ring-color, var(--custom-actionbutton-focus-ring-color), var(--spectrum-actionbutton-focus-ring-color));
     }
   }
 }
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml
index 882b7431fdf..731cb619cdf 100644
--- a/components/actionbutton/metadata/actionbutton.yml
+++ b/components/actionbutton/metadata/actionbutton.yml
@@ -1264,30 +1264,24 @@ examples:
     name: Customized
     markup: |
       <style type="text/css">
-        /* color customizations should not be done if forced-colors is set */
-        @media (forced-colors: none) {
-          .custom-ActionButton {
-            --custom-actionbutton-background-color-default: var(--spectrum-orange-200);
-            --custom-actionbutton-background-color-hover: var(--spectrum-orange-100);
-            --custom-actionbutton-background-color-down: var(--spectrum-orange-400);
-            --custom-actionbutton-background-color-focus: var(--spectrum-orange-100);
-
-            --custom-actionbutton-border-color-default: var(--spectrum-orange-400);
-            --custom-actionbutton-border-color-hover: var(--spectrum-orange-500);
-            --custom-actionbutton-border-color-down: var(--spectrum-orange-600);
-            --custom-actionbutton-border-color-focus: var(--spectrum-orange-500);
-
-            --custom-actionbutton-content-color-default: var(--spectrum-orange-1000);
-            --custom-actionbutton-content-color-hover: var(--spectrum-orange-1100);
-            --custom-actionbutton-content-color-down: var(--spectrum-orange-1000);
-            --custom-actionbutton-content-color-focus: var(--spectrum-orange-1300);
-
-            --custom-actionbutton-focus-ring-color: var(--spectrum-orange-800);
-          }
-        }
-
-        /* dimensional customizations can be done for all cases */
         .custom-ActionButton {
+          --custom-actionbutton-background-color-default: var(--spectrum-orange-200);
+          --custom-actionbutton-background-color-hover: var(--spectrum-orange-100);
+          --custom-actionbutton-background-color-down: var(--spectrum-orange-400);
+          --custom-actionbutton-background-color-focus: var(--spectrum-orange-100);
+
+          --custom-actionbutton-border-color-default: var(--spectrum-orange-400);
+          --custom-actionbutton-border-color-hover: var(--spectrum-orange-500);
+          --custom-actionbutton-border-color-down: var(--spectrum-orange-600);
+          --custom-actionbutton-border-color-focus: var(--spectrum-orange-500);
+
+          --custom-actionbutton-content-color-default: var(--spectrum-orange-1000);
+          --custom-actionbutton-content-color-hover: var(--spectrum-orange-1100);
+          --custom-actionbutton-content-color-down: var(--spectrum-orange-1000);
+          --custom-actionbutton-content-color-focus: var(--spectrum-orange-1300);
+
+          --custom-actionbutton-focus-ring-color: var(--spectrum-orange-800);
+
           --custom-actionbutton-min-width: 24px;
           --custom-actionbutton-height: 44px;
 

From 6f2000cf139ec2bc3c979a58818b396ecd98aa4d Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Thu, 28 Apr 2022 10:11:33 -0700
Subject: [PATCH 18/23] fix: correct fallbacks for WHCM

---
 components/actionbutton/index.css | 32 +++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index d13e8ea3613..3da7fb9974f 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -328,33 +328,33 @@ governing permissions and limitations under the License.
   padding-inline-start: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text));
   padding-inline-end: var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text));
 
-  background-color: var(--highcontrast-actionbutton-background-color-default, var(--custom-actionbutton-background-color-default), var(--spectrum-actionbutton-background-color-default));
-  border-color: var(--highcontrast-actionbutton-border-color-default, var(--custom-actionbutton-border-color-default), var(--spectrum-actionbutton-border-color-default));
-  color: var(--highcontrast-actionbutton-content-color-default, var(--custom-actionbutton-content-color-default), var(--spectrum-actionbutton-content-color-default));
+  background-color: var(--highcontrast-actionbutton-background-color-default, var(--custom-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
+  border-color: var(--highcontrast-actionbutton-border-color-default, var(--custom-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default)));
+  color: var(--highcontrast-actionbutton-content-color-default, var(--custom-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));
 
   &:hover {
-    background-color: var(--highcontrast-actionbutton-background-color-hover, var(--custom-actionbutton-background-color-hover), var(--spectrum-actionbutton-background-color-hover));
-    border-color: var(--highcontrast-actionbutton-border-color-hover, var(--custom-actionbutton-border-color-hover), var(--spectrum-actionbutton-border-color-hover));
-    color: var(--highcontrast-actionbutton-content-color-hover, var(--custom-actionbutton-content-color-hover), var(--spectrum-actionbutton-content-color-hover));
+    background-color: var(--highcontrast-actionbutton-background-color-hover, var(--custom-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
+    border-color: var(--highcontrast-actionbutton-border-color-hover, var(--custom-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover)));
+    color: var(--highcontrast-actionbutton-content-color-hover, var(--custom-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover)));
   }
 
   &:focus-ring {
-    background-color: var(--highcontrast-actionbutton-background-color-focus, var(--custom-actionbutton-background-color-focus), var(--spectrum-actionbutton-background-color-focus));
-    border-color: var(--highcontrast-actionbutton-border-color-focus, var(--custom-actionbutton-border-color-focus), var(--spectrum-actionbutton-border-color-focus));
-    color: var(--highcontrast-actionbutton-content-color-focus, var(--custom-actionbutton-content-color-focus), var(--spectrum-actionbutton-content-color-focus));
+    background-color: var(--highcontrast-actionbutton-background-color-focus, var(--custom-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)));
+    border-color: var(--highcontrast-actionbutton-border-color-focus, var(--custom-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus)));
+    color: var(--highcontrast-actionbutton-content-color-focus, var(--custom-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus)));
   }
 
   &:active {
-    background-color: var(--highcontrast-actionbutton-background-color-down, var(--custom-actionbutton-background-color-down), var(--spectrum-actionbutton-background-color-down));
-    border-color: var(--highcontrast-actionbutton-border-color-down, var(--custom-actionbutton-border-color-down), var(--spectrum-actionbutton-border-color-down));
-    color: var(--highcontrast-actionbutton-content-color-down, var(--custom-actionbutton-content-color-down), var(--spectrum-actionbutton-content-color-down));
+    background-color: var(--highcontrast-actionbutton-background-color-down, var(--custom-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)));
+    border-color: var(--highcontrast-actionbutton-border-color-down, var(--custom-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down)));
+    color: var(--highcontrast-actionbutton-content-color-down, var(--custom-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down)));
   }
 
   &:disabled,
   &.is-disabled {
-    background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--custom-actionbutton-background-color-disabled), var(--spectrum-actionbutton-background-color-disabled));
-    border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--custom-actionbutton-border-color-disabled), var(--spectrum-actionbutton-border-color-disabled));
-    color: var(--highcontrast-actionbutton-content-color-disabled, var(--custom-actionbutton-content-color-disabled), var(--spectrum-actionbutton-content-color-disabled));
+    background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--custom-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)));
+    border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--custom-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled)));
+    color: var(--highcontrast-actionbutton-content-color-disabled, var(--custom-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled)));
   }
 }
 
@@ -426,7 +426,7 @@ a.spectrum-ActionButton {
     box-shadow: none !important;
 
     &:after {
-      box-shadow: 0 0 0 var(--custom-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--highcontrast-actionbutton-focus-ring-color, var(--custom-actionbutton-focus-ring-color), var(--spectrum-actionbutton-focus-ring-color));
+      box-shadow: 0 0 0 var(--custom-actionbutton-focus-ring-thickness, var(--spectrum-actionbutton-focus-ring-thickness)) var(--highcontrast-actionbutton-focus-ring-color, var(--custom-actionbutton-focus-ring-color, var(--spectrum-actionbutton-focus-ring-color)));
     }
   }
 }

From c5512742dde2efd353dbe6929f88d66eff030831 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Thu, 28 Apr 2022 10:13:59 -0700
Subject: [PATCH 19/23] fix: quiet border colors

---
 components/actionbutton/index.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 3da7fb9974f..2c6dedf349c 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -102,7 +102,13 @@ governing permissions and limitations under the License.
       --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
       --spectrum-actionbutton-background-color-focus: transparent;
 
+      --spectrum-actionbutton-border-color-default: transparent;
+      --spectrum-actionbutton-border-color-hover: transparent;
+      --spectrum-actionbutton-border-color-down: transparent;
+      --spectrum-actionbutton-border-color-focus: transparent;
+
       --spectrum-actionbutton-background-color-disabled: transparent;
+      --spectrum-actionbutton-border-color-disabled: transparent;
     }
 
     &.is-selected {

From 2e06f4459810f5b680f2594b8c35486e4e358779 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Thu, 28 Apr 2022 12:52:04 -0700
Subject: [PATCH 20/23] refactor: code cleanup

---
 components/actionbutton/index.css | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 2c6dedf349c..61fac695939 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -322,11 +322,10 @@ governing permissions and limitations under the License.
 .spectrum-ActionButton {
   @inherit: %spectrum-BaseButton;
   position: relative;
-  padding-inline-start: 0;
-  padding-inline-end: 0;
 
   min-inline-size: var(--custom-actionbutton-min-width, var(--spectrum-actionbutton-min-width));
   height: var(--custom-actionbutton-height, var(--spectrum-actionbutton-height));
+
   border-radius: var(--custom-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius));
   border-width: var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width));
 
@@ -369,10 +368,11 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-ActionButton-icon {
-  color: inherit;
   width: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
   height: var(--custom-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size));
 
+  color: inherit;
+
   & + .spectrum-ActionButton-label {
     /* Have gap on on the left */
     padding-inline-start: var(--custom-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual));
@@ -381,7 +381,7 @@ a.spectrum-ActionButton {
     padding-inline-end: 0;
   }
 
-  margin-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual))));
+  padding-inline-start: calc(-1 * (var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual))));
 }
 
 .spectrum-ActionButton-hold + .spectrum-ActionButton-icon,
@@ -392,22 +392,23 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-ActionButton-label {
-  color: inherit;
   @inherit: %spectrum-ButtonLabel;
 
   font-size: var(--custom-actionbutton-font-size, var(--spectrum-actionbutton-font-size));
-
   white-space: nowrap;
-  overflow: hidden;
+  color: inherit;
+
   text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .spectrum-ActionButton-hold {
-  color: inherit;
   position: absolute;
   inset-inline-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width)));
   inset-block-end: calc(var(--custom-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width)));
 
+  color: inherit;
+
   transform: logical rotate(0deg);
 }
 
@@ -416,16 +417,17 @@ a.spectrum-ActionButton {
   transition: border-color var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
 
   &:after {
-    pointer-events: none;
-    content: '';
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
+    inset: 0;
+
     margin: calc((var(--custom-actionbutton-focus-ring-gap, var(--spectrum-actionbutton-focus-ring-gap)) + var(--custom-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1);
+
     border-radius: var(--custom-actionbutton-focus-ring-border-radius, var(--spectrum-actionbutton-focus-ring-border-radius));
+
     transition: box-shadow var(--custom-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
+
+    pointer-events: none;
+    content: '';
   }
 
   &:focus-ring {

From adfec5718314605fb944c23da91feb6acdaa91ce Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Wed, 4 May 2022 10:35:00 -0700
Subject: [PATCH 21/23] style: linebreaks

---
 components/actionbutton/index.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 61fac695939..95d606dd5c8 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -222,7 +222,8 @@ governing permissions and limitations under the License.
         --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-black));
 
         --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color);
-        --spectrum-actionbutton-border-color-disabled: transparent;      }
+        --spectrum-actionbutton-border-color-disabled: transparent;
+      }
     }
   }
 }

From 8361163f151acc69f45465e0012d312747feed2c Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Fri, 6 May 2022 12:17:43 -0700
Subject: [PATCH 22/23] fix: update background-colors with new values

---
 components/actionbutton/index.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 95d606dd5c8..2ff39b4370d 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -78,9 +78,9 @@ governing permissions and limitations under the License.
 .spectrum {
   .spectrum-ActionButton {
     --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75);
-    --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-50);
-    --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
-    --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-50);
+    --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
+    --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
+    --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
 
     --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
     --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
@@ -98,9 +98,9 @@ governing permissions and limitations under the License.
 
     &.spectrum-ActionButton--quiet {
       --spectrum-actionbutton-background-color-default: transparent;
-      --spectrum-actionbutton-background-color-hover: transparent;
-      --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
-      --spectrum-actionbutton-background-color-focus: transparent;
+      --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
+      --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
+      --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
 
       --spectrum-actionbutton-border-color-default: transparent;
       --spectrum-actionbutton-border-color-hover: transparent;

From f663b92ac381a7be17714ef4f95e06761565b6b4 Mon Sep 17 00:00:00 2001
From: Larry Davis <lazdnet@gmail.com>
Date: Thu, 12 May 2022 13:15:21 -0700
Subject: [PATCH 23/23] refactor: design review feedback

re-organize vars, use alias for static focus-ring color, remove duplication
---
 components/actionbutton/index.css | 43 ++++++++++++++-----------------
 components/tokens/custom.css      | 14 ++++++++--
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
index 2ff39b4370d..c30e69f9467 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -117,16 +117,16 @@ governing permissions and limitations under the License.
       --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
       --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
 
-      --spectrum-actionbutton-content-color-default: var(--spectrum-white);
-      --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
-      --spectrum-actionbutton-content-color-down: var(--spectrum-white);
-      --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
-
       --spectrum-actionbutton-border-color-default: transparent;
       --spectrum-actionbutton-border-color-hover: transparent;
       --spectrum-actionbutton-border-color-down: transparent;
       --spectrum-actionbutton-border-color-focus: transparent;
 
+      --spectrum-actionbutton-content-color-default: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-down: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
+
       --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
       --spectrum-actionbutton-border-color-disabled: transparent;
 
@@ -151,11 +151,6 @@ governing permissions and limitations under the License.
     }
 
     &.spectrum-ActionButton--staticBlack {
-      --spectrum-actionbutton-content-color-default: var(--spectrum-black);
-      --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
-      --spectrum-actionbutton-content-color-down: var(--spectrum-black);
-      --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
-
       --spectrum-actionbutton-background-color-default: transparent;
       --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300);
       --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400);
@@ -166,7 +161,12 @@ governing permissions and limitations under the License.
       --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600);
       --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500);
 
-      --spectrum-actionbutton-focus-ring-color: var(--spectrum-black);
+      --spectrum-actionbutton-content-color-default: var(--spectrum-black);
+      --spectrum-actionbutton-content-color-hover: var(--spectrum-black);
+      --spectrum-actionbutton-content-color-down: var(--spectrum-black);
+      --spectrum-actionbutton-content-color-focus: var(--spectrum-black);
+
+      --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-black-focus-ring-color);
 
       --spectrum-actionbutton-background-color-disabled: transparent;
       --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color);
@@ -178,22 +178,18 @@ governing permissions and limitations under the License.
         --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900);
         --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900);
 
+        --spectrum-actionbutton-border-color-disabled: transparent;
+
         --spectrum-actionbutton-content-color-default: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
         --spectrum-actionbutton-content-color-hover: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
         --spectrum-actionbutton-content-color-down: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
         --spectrum-actionbutton-content-color-focus: var(--custom-actionbutton-static-content-color, var(--spectrum-white));
 
         --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color);
-        --spectrum-actionbutton-border-color-disabled: transparent;
       }
     }
 
     &.spectrum-ActionButton--staticWhite {
-      --spectrum-actionbutton-content-color-default: var(--spectrum-white);
-      --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
-      --spectrum-actionbutton-content-color-down: var(--spectrum-white);
-      --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
-
       --spectrum-actionbutton-background-color-default: transparent;
       --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300);
       --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400);
@@ -204,7 +200,12 @@ governing permissions and limitations under the License.
       --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600);
       --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500);
 
-      --spectrum-actionbutton-focus-ring-color: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-default: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-down: var(--spectrum-white);
+      --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
+
+      --spectrum-actionbutton-focus-ring-color: var(--spectrum-static-white-focus-ring-color);
 
       --spectrum-actionbutton-background-color-disabled: transparent;
       --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color);
@@ -242,18 +243,12 @@ governing permissions and limitations under the License.
 
     --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
     --spectrum-actionbutton-border-color-disabled: transparent;
-    --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color);
 
     &.is-selected {
       --spectrum-actionbutton-background-color-default: var(--spectrum-neutral-background-color-default);
       --spectrum-actionbutton-background-color-hover: var(--spectrum-neutral-background-color-hover);
       --spectrum-actionbutton-background-color-down: var(--spectrum-neutral-background-color-down);
       --spectrum-actionbutton-background-color-focus: var(--spectrum-neutral-background-color-key-focus);
-
-      --spectrum-actionbutton-content-color-default: var(--spectrum-white);
-      --spectrum-actionbutton-content-color-hover: var(--spectrum-white);
-      --spectrum-actionbutton-content-color-down: var(--spectrum-white);
-      --spectrum-actionbutton-content-color-focus: var(--spectrum-white);
     }
 
     &.spectrum-ActionButton--staticBlack,
diff --git a/components/tokens/custom.css b/components/tokens/custom.css
index 40ab62f67f1..f792877800b 100644
--- a/components/tokens/custom.css
+++ b/components/tokens/custom.css
@@ -14,10 +14,20 @@ governing permissions and limitations under the License.
 
 .spectrum {
   --spectrum-animation-duration-100: 130ms;
+}
 
+.spectrum--medium {
   /* edge-to-visual-only is used for icon-only buttons */
   --spectrum-edge-to-visual-only-75: 4px;
   --spectrum-edge-to-visual-only-100: 7px;
-  --spectrum-edge-to-visual-only-200: 8px;
-  --spectrum-edge-to-visual-only-300: 9px;
+  --spectrum-edge-to-visual-only-200: 10px;
+  --spectrum-edge-to-visual-only-300: 13px;
+}
+
+.spectrum--large {
+  /* edge-to-visual-only is used for icon-only buttons */
+  --spectrum-edge-to-visual-only-75: 5px;
+  --spectrum-edge-to-visual-only-100: 9px;
+  --spectrum-edge-to-visual-only-200: 13px;
+  --spectrum-edge-to-visual-only-300: 16px;
 }