Button and ActionButton design updates (#3650)

Author: devongovett

packages/@adobe/spectrum-css-temp/components/actiongroup/index.css

@@ -99,17 +99,29 @@ governing permissions and limitations under the License.
 
     .spectrum-ActionGroup-item {
       position: relative;
-      border-radius: 0;
+      --spectrum-button-border-radius: 0px;
       z-index: 1;
 
       &:first-child {
         border-start-start-radius: var(--spectrum-actionbutton-border-radius);
         border-end-start-radius: var(--spectrum-actionbutton-border-radius);
+
+        /* focus ring */
+        &:after {
+          border-start-start-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap));
+          border-end-start-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap));
+        }
       }
 
       &:last-child {
         border-start-end-radius: var(--spectrum-actionbutton-border-radius);
         border-end-end-radius: var(--spectrum-actionbutton-border-radius);
+
+        /* focus ring */
+        &:after {
+          border-start-end-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap));
+          border-end-end-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap));
+        }
       }
 
       &.spectrum-ActionGroup-item--isDisabled {

packages/@adobe/spectrum-css-temp/components/button/index.css

@@ -41,6 +41,8 @@ governing permissions and limitations under the License.
   margin: 0;
 
   border-style: solid;
+  border-radius: var(--spectrum-button-border-radius);
+  border-width: var(--spectrum-button-border-width);
 
   /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
   text-transform: none;
@@ -113,8 +115,8 @@ governing permissions and limitations under the License.
 }
 
 %spectrum-ButtonWithFocusRing {
-  &:after {
-    border-radius: calc(var(--spectrum-button-primary-border-radius) + var(--spectrum-alias-focus-ring-gap));
+&:after {
+  border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-alias-focus-ring-gap));
     content: '';
     display: block;
     position: absolute;
@@ -131,7 +133,7 @@ governing permissions and limitations under the License.
 
   &:focus-ring {
     &:after {
-      margin: calc(var(--spectrum-alias-focus-ring-gap) * -2);
+      margin: calc(var(--spectrum-alias-focus-ring-gap) * -1 - var(--spectrum-button-border-width));
     }
   }
 }
@@ -140,9 +142,9 @@ governing permissions and limitations under the License.
   @inherit: %spectrum-BaseButton;
   @inherit: %spectrum-ButtonWithFocusRing;
 
-  border-width: var(--spectrum-button-primary-border-size);
   border-style: solid;
-  border-radius: var(--spectrum-button-primary-border-radius);
+  --spectrum-button-border-radius: var(--spectrum-button-primary-border-radius);
+  --spectrum-button-border-width: var(--spectrum-button-primary-border-size);
 
   min-block-size: var(--spectrum-button-primary-height);
   block-size: 0%;
@@ -188,6 +190,7 @@ a.spectrum-ActionButton {
 
 .spectrum-ActionButton {
   @inherit: %spectrum-BaseButton;
+  @inherit: %spectrum-ButtonWithFocusRing;
   position: relative;
 
   block-size: var(--spectrum-actionbutton-height);
@@ -196,8 +199,8 @@ a.spectrum-ActionButton {
   /* Use icon padding by default as it's smaller */
   padding: 0;
 
-  border-width: var(--spectrum-actionbutton-border-size);
-  border-radius: var(--spectrum-actionbutton-border-radius);
+  --spectrum-button-border-radius: var(--spectrum-actionbutton-border-radius);
+  --spectrum-button-border-width: var(--spectrum-actionbutton-border-size);
 
   font-size: var(--spectrum-actionbutton-text-size);
   font-weight: var(--spectrum-actionbutton-text-font-weight);
@@ -276,41 +279,19 @@ a.spectrum-ActionButton {
   font-weight: var(--spectrum-actionbutton-quiet-text-font-weight);
 }
 
-.spectrum-ActionButton--emphasized,
-.spectrum-ActionButton--staticColor {
-  @inherit: %spectrum-ButtonWithFocusRing;
-
-  &:after {
-    /* Override border-radius set in %spectrum-ButtonWithFocusRing since this is not a pill button */
-    border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-alias-focus-ring-gap));
-  }
-
-  &:focus-ring {
-    &:after {
-      /* action buttons only have a 1px border, not 2px */
-      margin: calc(calc(var(--spectrum-alias-focus-ring-gap) * -1) - var(--spectrum-actionbutton-quiet-border-size));
-    }
-  }
-}
-
 .spectrum-LogicButton {
   @inherit: %spectrum-BaseButton;
   @inherit: %spectrum-ButtonWithFocusRing;
 
   block-size: var(--spectrum-logicbutton-and-height);
   padding: var(--spectrum-logicbutton-and-padding-x);
 
-  border-width: var(--spectrum-logicbutton-and-border-size);
-  border-radius: var(--spectrum-logicbutton-and-border-radius);
+  --spectrum-button-border-width: var(--spectrum-logicbutton-and-border-size);
+  --spectrum-button-border-radius: var(--spectrum-logicbutton-and-border-radius);
 
   font-size: var(--spectrum-logicbutton-and-text-size);
   font-weight: var(--spectrum-logicbutton-and-text-font-weight);
   line-height: 0;
-
-  &:after {
-    /* Override border-radius set in %spectrum-ButtonWithFocusRing since this is not a pill button */
-    border-radius: calc(var(--spectrum-logicbutton-and-border-radius) + var(--spectrum-alias-focus-ring-gap));
-  }
 }
 
 .spectrum-FieldButton {
@@ -375,7 +356,8 @@ a.spectrum-ActionButton {
   inline-size: var(--spectrum-clearbutton-medium-width);
   block-size: var(--spectrum-clearbutton-medium-height);
 
-  border-radius: 100%;
+  --spectrum-button-border-radius: 100%;
+  --spectrum-button-border-width: 0px;
 
   padding: 0;
   margin: 0;
@@ -389,15 +371,6 @@ a.spectrum-ActionButton {
   }
 }
 
-.spectrum-ClearButton--overBackground {
-  &:focus-ring {
-    &:after {
-      /* Adjust margin because ClearButton does not have a border */
-      margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);
-    }
-  }
-}
-
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .spectrum-ClearButton {
     > .spectrum-Icon {