Sass - Fix syntax for mixed declarations to silence warnings (#3368)

Author: KristinLBradley

.changeset/easy-parrots-follow.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+Fix mixed sass declaration syntax to silence warnings

packages/components/src/styles/mixins/_interactive-dark-theme.scss

@@ -61,11 +61,14 @@ $hds-interactive-dark-theme-focus-ring-action-box-shadow:
   &.mock-focus {
     @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
 
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-neutral-700);
+    // See: https://sass-lang.com/d/mixed-decls
+    & {
+      color: var(--token-color-foreground-high-contrast);
+      background-color: var(--token-color-palette-neutral-700);
 
-    @if ($add-visible-border) {
-      border-color: $hds-interactive-dark-theme-color-focus-action-internal;
+      @if ($add-visible-border) {
+        border-color: $hds-interactive-dark-theme-color-focus-action-internal;
+      }
     }
 
     // focus ring: