[terra-form-select] Update focus indicators for Fusion theme

packages/terra-form-select/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed focus indicators for orion-fusion-theme.
+
 ## 6.59.0 - (March 15, 2024)
 
 * Fixed

packages/terra-form-select/src/orion-fusion-theme/Frame.module.scss

@@ -22,7 +22,8 @@
     --terra-form-select-above-border-bottom-left-radius: 3px;
     --terra-form-select-above-border-bottom-right-radius: 3px;
     --terra-form-select-hover-border-color: #dedfe0;
-    --terra-form-select-outline: 2px dashed #000;
+    --terra-form-select-outline: none;
+    --terra-form-select-box-shadow: 0 0 1px 3px rgba(76,178,233,0.5),0 0 7px 4px rgba(76,178,233,0.35);
     --terra-form-select-hover-color: #1c1f21;
     --terra-form-select-incomplete-background-color: #fefd9a;
     --terra-form-select-incomplete-focus-background-color: #fefd9a;

packages/terra-form-select/src/orion-fusion-theme/Option.module.scss

@@ -22,7 +22,9 @@
     --terra-form-select-option-icon-width: 1rem;
     --terra-form-select-option-active-background-color: #ebf6fd;
     --terra-form-select-option-disabled-color: rgba(28, 31, 33, 0.25);
-    --terra-form-select-option-active-color-outline: 2px dashed #000;
+    --terra-form-select-option-active-color-outline: none;
+    --terra-form-select-option-active-box-shadow: inset 0 0 1px 3px rgba(76, 178, 233, 0.5), 0 0 7px 4px rgba(76, 178, 233, 0.35);
+
 
 
     @include terra-inline-svg-var('--terra-form-select-option-icon-active-background', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect width="48" height="48" rx="6" ry="6" fill="#a3dcfd" opacity="0.5"/><path d="M20,36.4,6.7,23.1l3.6-3.6L20,29.4,37.7,11.5l3.6,3.6Z" fill="#0079be"/></svg>');

packages/terra-form-select/src/shared/_Frame.module.scss

@@ -393,6 +393,7 @@
   .single,
   .select {
     &.is-focused {
+      box-shadow: var(--terra-form-select-box-shadow, none);
       outline: var(--terra-form-select-outline, 2px dashed #000);
     }
 

packages/terra-form-select/src/shared/_Option.module.scss

@@ -24,6 +24,7 @@
 
     &.is-active {
       background-color: var(--terra-form-select-option-active-background-color, #ebf6fd);
+      box-shadow: var(--terra-form-select-option-active-box-shadow, none);
       outline: var(--terra-form-select-option-active-color-outline, 2px dashed #000);
       outline-offset: -2px;
       z-index: 2;