fix: accessibility focus-visible default halo

This commit addresses a UI issue where users are not being given
effective UI feedback when tabbing through most common experiences.

Changes to be committed:
modified:   src/_core.scss

docs/index.html

@@ -107,29 +107,18 @@
   // if $focus-visible is true, override the default focus-visible outline
   @if $focus-visible {
     &:focus-visible {
-      outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+      outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
     }
   } @else {
     &:focus-visible {
-      outline: 0;
-    }
-  }
-
-  // if $focus-visible is true, override the default focus-visible outline
-  @if $focus-visible {
-    &:focus-visible {
-      outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
-    }
-  } @else {
-    &:focus-visible {
-      outline: 0;
+      outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
     }
   }
 
   // if $focus is true, override the default focus outline
   @if $focus {
     &:focus {
-      outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+      outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
     }
   }
 }</code>" data-collapsed="#{$scope} * { ... }"><code>#{$scope} * { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Global selector to address box-model and default <code>:focus</code> pseudo elements.</p><p>Global media setting for <a href="https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#taking-it-to-code">a11y support of reduced-motion</a>. By setting the durations to almost 0, we prevent animation from playing for those with motion sensitivities without affecting transition or animation events (e.g. transitionend).</p><p><a href="/#scope-prefix-variable-scope">Manage</a> <code>$scope</code> option.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>*, *:before, *:after {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro *, .auro *:before, .auro *:after {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/core&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file with <code>$focus</code> set to <code>true</code></p></div><pre class="example__code language-scss"><code>$focus: true;

src/_core.scss

@@ -44,29 +44,18 @@ $focus-visible: null !default;
   // if $focus-visible is true, override the default focus-visible outline
   @if $focus-visible {
     &:focus-visible {
-      outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+      outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
     }
   } @else {
     &:focus-visible {
-      outline: 0;
-    }
-  }
-
-  // if $focus-visible is true, override the default focus-visible outline
-  @if $focus-visible {
-    &:focus-visible {
-      outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
-    }
-  } @else {
-    &:focus-visible {
-      outline: 0;
+      outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
     }
   }
 
   // if $focus is true, override the default focus outline
   @if $focus {
     &:focus {
-      outline: 2px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+      outline: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
     }
   }
 }