HDS-5666 Add outline color for CodeBlock CopyButton focus state

Author: KristinLBradley

packages/components/src/styles/components/code-block/index.scss

@@ -180,10 +180,7 @@ $hds-code-block-code-footer-height: 48px;
     color: var(--hds-code-block-color-foreground-primary);
     background-color: var(--hds-code-block-color-surface-faint);
     border-color: var(--hds-code-block-color-focus-action-internal);
-
-    &::before {
-      border-color: var(--hds-code-block-color-focus-action-external);
-    }
+    outline-color: var(--hds-code-block-color-focus-action-external);
   }
 
   .hds-icon {

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

@@ -3777,12 +3777,7 @@ button.hds-button[href]::after {
   color: var(--hds-code-block-color-foreground-primary);
   background-color: var(--hds-code-block-color-surface-faint);
   border-color: var(--hds-code-block-color-focus-action-internal);
-}
-.hds-code-block__height-toggle-button:focus::before, .hds-code-block__height-toggle-button.mock-focus::before, .hds-code-block__height-toggle-button:focus-visible::before,
-.hds-code-block__copy-button:focus::before,
-.hds-code-block__copy-button.mock-focus::before,
-.hds-code-block__copy-button:focus-visible::before {
-  border-color: var(--hds-code-block-color-focus-action-external);
+  outline-color: var(--hds-code-block-color-focus-action-external);
 }
 .hds-code-block__height-toggle-button .hds-icon,
 .hds-code-block__copy-button .hds-icon {

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

@@ -4313,12 +4313,7 @@ button.hds-button[href]::after {
   color: var(--hds-code-block-color-foreground-primary);
   background-color: var(--hds-code-block-color-surface-faint);
   border-color: var(--hds-code-block-color-focus-action-internal);
-}
-.hds-code-block__height-toggle-button:focus::before, .hds-code-block__height-toggle-button.mock-focus::before, .hds-code-block__height-toggle-button:focus-visible::before,
-.hds-code-block__copy-button:focus::before,
-.hds-code-block__copy-button.mock-focus::before,
-.hds-code-block__copy-button:focus-visible::before {
-  border-color: var(--hds-code-block-color-focus-action-external);
+  outline-color: var(--hds-code-block-color-focus-action-external);
 }
 .hds-code-block__height-toggle-button .hds-icon,
 .hds-code-block__copy-button .hds-icon {