HDS-5666 Style Promary Button focus style to visually match original

Author: KristinLBradley

packages/components/src/styles/mixins/_button.scss

@@ -76,12 +76,14 @@ $hds-button-sizes: ("small", "medium", "large");
   &.mock-focus {
     color: var(--token-button-foreground-color-primary-focus);
     background-color: var(--token-button-surface-color-primary-focus);
-    // border-color: var(--token-button-border-color-primary-focus-internal);
+    border-color: var(--token-button-border-color-primary-focus-internal);
 
     // TEST: Replacement of pseudo-element-based focus ring
-    border-color: #fff; // TEST: to add greater contrast
-    box-shadow: 0 0 0 3px var(--token-color-focus-action-external); // standardized w/ other variants
-    // box-shadow: 0 0 0 1px #fff, 0 0 0 4px var(--token-color-focus-action-external); // closer to original style
+    // border-color: #fff; // TEST: to add greater contrast
+    // box-shadow: 0 0 0 3px var(--token-color-focus-action-external); // standardized w/ other variants
+    box-shadow:
+      0 0 0 2px #fff,
+      0 0 0 5px var(--token-color-focus-action-external); // similar to original style using pseudo-element
 
     // &::before {
     //   // the position absolute of an element is computed from the inside of the border of the container

showcase/public/assets/styles/@hashicorp/design-system-components-common.css

@@ -3110,8 +3110,8 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 .hds-button--color-primary:focus, .hds-button--color-primary.mock-focus {
   color: var(--token-button-foreground-color-primary-focus);
   background-color: var(--token-button-surface-color-primary-focus);
-  border-color: #fff;
-  box-shadow: 0 0 0 3px var(--token-color-focus-action-external);
+  border-color: var(--token-button-border-color-primary-focus-internal);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--token-color-focus-action-external);
 }
 .hds-button--color-primary:active, .hds-button--color-primary.mock-active {
   color: var(--token-button-foreground-color-primary-active);
@@ -4537,8 +4537,8 @@ button.hds-button[href]::after {
 .hds-dropdown-toggle-button--color-primary:focus, .hds-dropdown-toggle-button--color-primary.mock-focus {
   color: var(--token-button-foreground-color-primary-focus);
   background-color: var(--token-button-surface-color-primary-focus);
-  border-color: #fff;
-  box-shadow: 0 0 0 3px var(--token-color-focus-action-external);
+  border-color: var(--token-button-border-color-primary-focus-internal);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--token-color-focus-action-external);
 }
 .hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
   color: var(--token-button-foreground-color-primary-active);

showcase/public/assets/styles/@hashicorp/design-system-components.css

@@ -3646,8 +3646,8 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
 .hds-button--color-primary:focus, .hds-button--color-primary.mock-focus {
   color: var(--token-button-foreground-color-primary-focus);
   background-color: var(--token-button-surface-color-primary-focus);
-  border-color: #fff;
-  box-shadow: 0 0 0 3px var(--token-color-focus-action-external);
+  border-color: var(--token-button-border-color-primary-focus-internal);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--token-color-focus-action-external);
 }
 .hds-button--color-primary:active, .hds-button--color-primary.mock-active {
   color: var(--token-button-foreground-color-primary-active);
@@ -5073,8 +5073,8 @@ button.hds-button[href]::after {
 .hds-dropdown-toggle-button--color-primary:focus, .hds-dropdown-toggle-button--color-primary.mock-focus {
   color: var(--token-button-foreground-color-primary-focus);
   background-color: var(--token-button-surface-color-primary-focus);
-  border-color: #fff;
-  box-shadow: 0 0 0 3px var(--token-color-focus-action-external);
+  border-color: var(--token-button-border-color-primary-focus-internal);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--token-color-focus-action-external);
 }
 .hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
   color: var(--token-button-foreground-color-primary-active);