fix(button): correct focus indicator rounding and basebutton mod

The focus indicator rounding needed an additional calc in order to
have the correct rounding.

While testing --mod-button-focus-ring-gap and some other mods, it was
also noticed that a declaration being imported from basebutton was
causing some of the mod names to be different and the mod to not work
correctly (basebutton is generating a selector for the margin of
.spectrum-Button:focus-visible::after).

components/button/index.css

@@ -391,7 +391,10 @@ governing permissions and limitations under the License.
         var(--mod-button-border-width, var(--spectrum-button-border-width))
       ) * -1
     );
-    border-radius: var(--mod-button-focus-ring-border-radius, var(--mod-button-border-radius, var(--spectrum-button-border-radius)));
+    border-radius: var(--mod-button-focus-ring-border-radius, calc(
+      var(--mod-button-border-radius, var(--spectrum-button-border-radius)) +
+      var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap))
+    ));
     transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out;
     pointer-events: none;
     content: '';
@@ -406,6 +409,13 @@ governing permissions and limitations under the License.
       box-shadow: 0 0 0
         var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness))
         var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)));
+
+      /* Margin is repeated to override declaration coming from the imported BaseButton. */
+      margin: calc((
+          var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) +
+          var(--mod-button-border-width, var(--spectrum-button-border-width))
+        ) * -1
+      );
     }
   }
 

components/button/stories/button.stories.js

@@ -642,4 +642,7 @@ WithWrapping.tags = ["is-hidden-story"];
 WithWrapping.storyName = "Wrapping";
 WithWrapping.args = {
 	variant: "primary",
+};
+WithWrapping.parameters = {
+	chromatic: { disableSnapshot: true },
 };